how to use locale in fullcalendar in angular 7 - fullcalendar

Question

I need to change the language of my calendar in the angular version 7. I have not found much documentation about this. The main thing is to change the language of the days that appear on the calendar.
!-- begin snippet: js hide: false console: true babel: false -->
import { Component, OnInit, ViewChild } from '#angular/core';
import { CalendarComponent } from 'ng-fullcalendar';
import { Options } from 'fullcalendar';
#Component({
selector: 'app-calendario',
templateUrl: './calendario.component.html',
styleUrls: ['./calendario.component.css']
})
export class CalendarioComponent implements OnInit {
//calendario
calendarOptions: Options;
displayEvent: any;
#ViewChild(CalendarComponent) ucCalendar: CalendarComponent;
constructor() { }
ngOnInit() {
this.calendarOptions = {
editable: true,
eventLimit: false,
header: {
left: '',
center: 'title',
right: 'month'
},
events: []
};
}
}
I try to add the property locale = 'es' in the calendarOptions, but it does not work,
add this to my angular json, but I do not know how to implement it
"scripts": [
"node_modules/fullcalendar/dist/locale/es.js"
]

Answer 1

Thanks Gabriel I make it work with this approach
First make sure you have the import of your desire lenguage
import esLocale from '#fullcalendar/core/locales/es';
import frLocale from '#fullcalendar/core/locales/fr';
In your html file, in the full-calendar selector, you should assign values to locales and locale options.
<full-calendar
defaultView="dayGridMonth"
[locales]="locales"
locale="es"
[weekends]="false"
[plugins]="calendarPlugins"></full-calendar>
Then a variable that holds all the languages that you need
locales = [esLocale, frLocale];

Answer 2

You can do that using the FullCalendarComponent, setting the locale code.
#ViewChild('calendar') calendarComponent: FullCalendarComponent;
and in the ngOnInit, like that:
this.calendarComponent.locales = [ { code: 'pt-br' } ];
I hope that works for you.

Answer 3

I suggest a simple solution "in this case, I want to change the language to French"
in your name.component.ts
import frLocale from '#fullcalendar/core/locales/fr';
calendarOptions: CalendarOptions = {
locale: frLocale, //according to the import package
events: [
{ title: 'event 1', date: '2020-04-01' },
{ title: 'event 2', date: '2020-07-15' }
]
};
in your name.component.html
<full-calendar [options]="calendarOptions"
id='fullcalendar'>

Answer 4

You can do that you can use getApi() on FullCalendarComponent
First Import corresponding languages in your component
import frLocale from '#fullcalendar/core/locales/fr';
import nlLocale from '#fullcalendar/core/locales/nl';
#ViewChild(FullCalendarComponent, {static: false})
calendarComponent: FullCalendarComponent;
ngAfterViewInit(): void {
this.calendarComponent.getApi().setOption('locale', nlLocale);
}

Answer 5

For me it worked when starting the locale inside the Full Calendar Component
#ViewChild('calendar') calendarComponent: FullCalendarComponent;
ngOnInit(): void {
this.initCalendar();
}
private initCalendar(): void {
this.calendarOptions = {
themeSystem: 'bootstrap',
bootstrapFontAwesome: false,
buttonText: {....},
dayMaxEventRows: 1,
initialView: 'dayGridMonth',
handleWindowResize: true,
headerToolbar: {.... },
events: [...],
editable: true,
selectable: true,
eventClick: this.handleEventClick.bind(this),
locales: [ { code: 'ar' }] // <==== HERE =====
}
}