CODEWITHSUNDEEP
fullcalendarangular7
Erley Blanco C
Erley Blanco C

Reputation: 71

how to use locale in fullcalendar in angular 7

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"
            ]

Upvotes: 6

Views: 8025

Answers (5)

Bacar Pereira
Bacar Pereira

Reputation: 1145

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 =====
 }
}

Upvotes: 2

Saad Khan
Saad Khan

Reputation: 119

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);
}

Upvotes: 0

SAAD BELEFQIH
SAAD BELEFQIH

Reputation: 372

I suggest a simple solution "in this case, I want to change the language to French"

  1. 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' } ] };

  2. in your name.component.html

    <full-calendar [options]="calendarOptions" id='fullcalendar'>

Upvotes: 1

Okyam
Okyam

Reputation: 730

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];

Upvotes: 9

Gabriel Dezan Busarello
Gabriel Dezan Busarello

Reputation: 21

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.

Upvotes: 2

Related Questions