CODEWITHSUNDEEP
javascriptjqueryhtmleventsfullcalendar
oshingc
oshingc

Reputation: 361

How change nameMonths of fullcalendar to Spanish or any language

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.

Upvotes: 10

Views: 45744

Answers (5)

r0b3rt0
r0b3rt0

Reputation: 206

Include fullcalendar/fullcalendar.js.

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

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

Full Calendar locale docs

Upvotes: 13

Gustavo Daniel
Gustavo Daniel

Reputation: 2478

For an ES6 build system:

import { Calendar } from '@fullcalendar/core';
import esLocale from '@fullcalendar/core/locales/es';
//...
let calendar = new Calendar(calendarEl, {
  locale: esLocale
});
//...

This way also translates text in toolbar buttons.

Locale documentation

Upvotes: 1

Tarik Benali
Tarik Benali

Reputation: 57

calendar.setOption('locale', 'es');

Upvotes: 2

lukas
lukas

Reputation: 574

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>

Upvotes: 6

SparoHawk
SparoHawk

Reputation: 557

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.

Upvotes: 9

Related Questions