How change nameMonths of fullcalendar to Spanish or any language

javascript jquery html events fullcalendar

34,582

Solution 1

When you invoke the calendar just pass the names of the months in spanish:

$('#calendar').fullCalendar({
    monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
    monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
    dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
    dayNamesShort: ['Dom','Lun','Mar','Mié','Jue','Vie','Sáb']
});

That should do it. You can do the same for any other option you want translated.

Solution 2

Include fullcalendar/fullcalendar.js

Include fullcalendar/locale/es.js for Spain, locale-all.js for World

 

    $('#calendar').fullCalendar({
       locale: 'es'
    })

Full Calendar locale docs

Solution 3

You need to override its default settings:

<head>
  <script type="text/javascript">
    $(document).ready(function() {
      $('#calendar').fullCalendar({
        monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
        monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
      });
    });
  </script>
</head>

<body>
  <div id='calendar'></div>
</body>

34,582

Author by

oshingc

I'm Software Engineering student. Happy coding everyday :D

Updated on March 12, 2021

Comments

oshingc over 3 years

I hope somebody could answer, is kind of silly question probably... I would like to change the values of monthnames, monthNamesShort. I found I can change the values here: http://arshaw.com/fullcalendar/docs/#time-date-formatting But can someone share some code of how. I will appreciate it.

Thank you a lot guys.
oshingc over 10 years

Yep, It worked, thank you now it changed! Now is time to apply muilti-languages to fullcalendar :D
SparoHawk over 10 years

If you want to do multi language you can make separate JS files for each language, that way you can use them easily anywhere.
Fernando Vieira about 7 years

'lang' property was removed. Now is 'locale'. We just need to include the desired location javascript and set this property