Assume I had variable where the required locales are dynamically getting update here in the below code i names it as requiedLocales, I want only them to be bundled in the build?

only bundle the locales present in the requriedLocales Array

import { Component, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FullCalendarModule } from '@fullcalendar/angular';
import dayGridPlugin from '@fullcalendar/daygrid';
import allLocales from '@fullcalendar/core/locales-all'
import { LocalizationService } from '../../services/localization.service';

@Component({
  selector: 'app-calendar',
  standalone: true,
  imports: [CommonModule, FullCalendarModule],
  template: `
    <full-calendar [options]="calendarOptions"></full-calendar>
  `,
})
export class CalendarComponent implements OnInit {
  private localizationService = inject(LocalizationService);
  
  private requiredLocales = ['en','ja'];
  calendarOptions: any = {
    plugins: [dayGridPlugin],
    initialView: 'dayGridMonth',
    locales: allLocales,
    locale: 'en'
  };

  ngOnInit() {
    this.localizationService.language$.subscribe((lang) => {
      this.calendarOptions = { ...this.calendarOptions, locale: lang };
    });
  }
}

I had option to import only required and keep in locales(calendar options) array this works but doesn't suits my scenario so help me with other solutions like adding any webpack plugin ? or ?

Assume I had variable where the required locales are dynamically getting update here in the below code i names it as requiedLocales, I want only them to be bundled in the build?

only bundle the locales present in the requriedLocales Array

import { Component, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FullCalendarModule } from '@fullcalendar/angular';
import dayGridPlugin from '@fullcalendar/daygrid';
import allLocales from '@fullcalendar/core/locales-all'
import { LocalizationService } from '../../services/localization.service';

@Component({
  selector: 'app-calendar',
  standalone: true,
  imports: [CommonModule, FullCalendarModule],
  template: `
    <full-calendar [options]="calendarOptions"></full-calendar>
  `,
})
export class CalendarComponent implements OnInit {
  private localizationService = inject(LocalizationService);
  
  private requiredLocales = ['en','ja'];
  calendarOptions: any = {
    plugins: [dayGridPlugin],
    initialView: 'dayGridMonth',
    locales: allLocales,
    locale: 'en'
  };

  ngOnInit() {
    this.localizationService.language$.subscribe((lang) => {
      this.calendarOptions = { ...this.calendarOptions, locale: lang };
    });
  }
}

I had option to import only required and keep in locales(calendar options) array this works but doesn't suits my scenario so help me with other solutions like adding any webpack plugin ? or ?

• javascript
• reactjs
• angular
• fullcalendar
• node-modules

• Why use locales at all? You need only one generic neutral-culture locale and only UTC time for any kind of storage and calculation. The locale and time zone should come into play only for each local user. Only on each local client side, the calendar information should be converted to the required local locale and time zone. – Sergey A Kryukov Commented Mar 15 at 22:14
• @SergeyAKryukov in fullCalendar locale settings are used to tell the calendar to display dates, times etc in certain languages. It doesn't automatically default to any detected location. See fullcalendar.io/docs/localization . And timezones are also handled separately than localised wordings etc. – ADyson Commented Mar 17 at 9:49
• @ADyson — Too bad... – Sergey A Kryukov Commented Mar 17 at 15:02
• @SergeyAKryukov speak to the developers of the plugin if you think the system could be improved :-) – ADyson Commented Mar 17 at 15:04
• @ADyson — Indeed, if your description is correct, I would consider the design unacceptable. However, I have better use of my time than talking to the developers. When and if I need a calendar, I'll easily create it myself, but in a good way. – Sergey A Kryukov Commented Mar 17 at 15:21

1 Answer 1

If you only want to load data for specific locales, then just use the package(s) for the locale(s) you want, instead of the "all" locales package.

You can use the example given in the locales documentation

e.g. this would load the Spanish and French locales specifically:

import { Calendar } from '@fullcalendar/core';
import esLocale from '@fullcalendar/core/locales/es';
import frLocale from '@fullcalendar/core/locales/fr';
...
let calendar = new Calendar(calendarEl, {
  locales: [ esLocale, frLocale ],
  locale: 'fr' // the initial locale. if not specified, uses the first one
});
...
calendar.setOption('locale', 'es');