Scheduler Toolbar Localization Issue

Question

I am using version "^20.3.50" of SyncFusion and when loading the CLDR and the calling SetCulture()
the toolbar's language does not change to the localized language of choice. In this case French.
The rest of the Scheduler does load the language but the toolbar never updates to french.
Also, this may be a separate issue but the language file does not load unless I add the following code. ANy help is appreciated

const interval = setInterval(() => {
        if (this.scheduleObj) {
    
          this.setCLDR(this.preferredLanguage);       
          clearInterval(interval); 
        }
      }, 100);  

Sabitha Rajamani · Answer

Hi Keith,Sample: https://stackblitz.com/edit/ej2-angular-fr-locale-sample?file=src%2Fapp.component.ts We prepared a sample in Angular Schedule with “fr” locale. You can set the French culture to the Schedule by following the steps below and let us know if you need any further assistance.We require the below files to localize the Schedule. ca-gregorian.json numbers.json timeZoneNames.json numberingSystems.json 1. You can get the above files by Installing the CLDR-Data package by using the below command.>> npm install cldr-data –saveOnce the installation is completed you can find the files required to localize the Schedule for each culture from the directory as shown below.You can get ca-gregorian.json, numbers.json, and timeZoneNames.json files from the directory as shown below.You can get the numberingSystems.json file from the directory as shown below. This file is common for all cultures.2. Import the required CLDR data files(ca-gregorian.json, numberingSystems.json, numbers.json, and timeZoneNames.json) and load them using the loadCldr method. You can find the culture files in our shared sample as shown in the below snip. These files are copied from the CLDR-Data package installed in step 1.[app.component.ts] import { Component } from '@angular/core'; import { loadCldr, L10n } from '@syncfusion/ej2-base'; import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, ResizeService, DragAndDropService } from '@syncfusion/ej2-angular-schedule'; loadCldr( require('./cldr-data/supplemental/numberingSystems.json'), require('./cldr-data/main/fr/ca-gregorian.json'), require('./cldr-data/main/fr/numbers.json'), require('./cldr-data/main/fr/timeZoneNames.json') ); 3. Load the locale words as shown below using the load method of L10n. You can find the localized word for the different cultures from the below repository.ej2-local: https://github.com/syncfusion/ej2-locale[app.component.ts] import { Component } from '@angular/core'; import { loadCldr, L10n } from '@syncfusion/ej2-base'; import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, ResizeService, DragAndDropService } from '@syncfusion/ej2-angular-schedule'; declare var require: any; loadCldr( require('./cldr-data/supplemental/numberingSystems.json'), require('./cldr-data/main/fr/ca-gregorian.json'), require('./cldr-data/main/fr/numbers.json'), require('./cldr-data/main/fr/timeZoneNames.json') ); L10n.load({ 'fr': { "schedule": { "day": "Journée", "week": "Semaine", "workWeek": "Semaine de travail", "month": "Mois", "year": "An", "agenda": "Ordre du jour", "weekAgenda": "Agenda de la semaine", "workWeekAgenda": "Agenda de la semaine de travail", "monthAgenda": "Agenda du mois", "today": "Aujourd'hui", "noEvents": "Pas d'événements", "emptyContainer": "Aucun événement n'est prévu ce jour-là.", "allDay": "Toute la journée", "start": "Début", "end": "Fin", "more": "plus", "close": "Fermer", "cancel": "Annuler", "noTitle": "(Pas de titre)", "delete": "Effacer", "deleteEvent": "Supprimer l'événement", "deleteMultipleEvent": "Supprimer plusieurs événements", "selectedItems": "éléments sélectionnés", "deleteSeries": "Supprimer la série", "edit": "modifier", "editSeries": "Modifier la série", "editEvent": "Modifier l'événement", "createEvent": "Créer", "subject": "Assujettir", "addTitle": "Ajouter un titre", "moreDetails": "Plus de détails", "save": "sauvegarder", "editContent": "Voulez-vous modifier uniquement cet événement ou toute la série?", "deleteContent": "Êtes-vous sûr de vouloir supprimer cet événement?", "deleteMultipleContent": "Êtes-vous sûr de vouloir supprimer les événements sélectionnés?", "newEvent": "Nouvel évènement", "title": "Titre", "location": "Emplacement", "description": "La description", "timezone": "Fuseau horaire", "startTimezone": "Démarrer le fuseau horaire", "endTimezone": "Fin du fuseau horaire", "repeat": "Répéter", "saveButton": "sauvegarder", "cancelButton": "Annuler", "deleteButton": "Effacer", "recurrence": "Récurrence", "wrongPattern": "Le modèle de récurrence n'est pas valide.", "seriesChangeAlert": "Voulez-vous annuler les modifications apportées à des instances spécifiques de cette série et les associer à nouveau à l'ensemble de la série ?", "createError": "La durée de l'événement doit être plus courte que sa fréquence. Raccourcissez la durée ou modifiez le modèle de récurrence dans l'éditeur d'événements de récurrence.", "sameDayAlert": "Deux occurrences du même événement ne peuvent pas se produire le même jour.", "occurenceAlert": "Impossible de replanifier une occurrence du rendez-vous périodique s'il ignore une occurrence ultérieure du même rendez-vous.", "editRecurrence": "Modifier la récurrence", "repeats": "Répétitions", "alert": "Alerte", "startEndError": "La date de fin sélectionnée se produit avant la date de début.", "invalidDateError": "La valeur de date entrée n'est pas valide.", "blockAlert": "Les événements ne peuvent pas être planifiés dans l'intervalle de temps bloqué.", "ok": "D'accord", "yes": "Oui", "no": "Non", "occurrence": "Occurrence", "series": "Séries", "previous": "précédent", "next": "Prochain", "timelineDay": "Jour de la chronologie", "timelineWeek": "Semaine chronologique", "timelineWorkWeek": "Semaine de travail", "timelineMonth": "Mois de la chronologie", "timelineYear": "Année de la chronologie", "editFollowingEvent": "Événements suivants", "deleteTitle": "Supprimer l'événement", "editTitle": "Modifier l'événement", "beginFrom": "Commencer à partir de", "endAt": "Fin à", "expandAllDaySection": "Développer la section toute la journée", "collapseAllDaySection": "Réduire la section toute la journée", "searchTimezone": "Recherche de fuseau horaire", "noRecords": "Aucun enregistrement trouvé", "deleteRecurrenceContent": "Voulez-vous supprimer uniquement cet événement ou toute la série?", "recurrenceDateValidation": "Certains mois ont moins que la date sélectionnée. Pour ces mois, l'événement se produira à la dernière date du mois." }, "recurrenceeditor": { "none": "Aucun", "daily": "du quotidien", "weekly": "Hebdomadaire", "monthly": "Mensuel", "month": "Mois", "yearly": "Annuel", "never": "Jamais", "until": "Jusqu'à", "count": "Compter", "first": "Premier", "second": "Seconde", "third": "Troisième", "fourth": "Quatrième", "last": "Dernier", "repeat": "Répéter", "repeatEvery": "Répétez chaque", "on": "Répéter sur", "end": "Fin", "onDay": "journée", "days": "journées", "weeks": "semaines", "months": "Mois", "years": "Années", "every": "chaque", "summaryTimes": "fois", "summaryOn": "sur", "summaryUntil": "jusqu'à", "summaryRepeat": "Répétitions", "summaryDay": "journées", "summaryWeek": "semaines", "summaryMonth": "mois", "summaryYear": "années", "monthWeek": "Mois Semaine", "monthPosition": "Position du mois", "monthExpander": "Expander mois", "yearExpander": "Expander année", "repeatInterval": "Intervalle de répétition" }, "calendar": { "today": "Aujourd'hui" }, } }); 4. Set the locale property to the Schedule.[app.component.html] Regards,Vijay Ravi

Keith Wells · Answer

Thanks. I found a similar example as you provided and I am doing everything as stated although in a more reusable format. I have. The below call occurs inside the CONSTRUCTOR of calendar.component.ts

  this.preferredLanguage ='fr-CH';
      setCulture(this.preferredLanguage);
      const interval = setInterval(() => {
        if (this.scheduleObj) {
    
          this.setCLDR(this.preferredLanguage);       
          clearInterval(interval); 
        }
      }, 100);  

    (QuickPopups.prototype as any).applyFormValidation = () => { };
    (FieldValidator.prototype as any).errorPlacement = this.dataService.errorPlacement;
  }

I call setCLDR()
Here is what this method does

 setCLDR(preferredLanguage: string) {
    this.localizationService.setLocalizedCLDR(preferredLanguage);
    const langData = localizationData as { [key: string]: any };
    const languageSettings = langData[preferredLanguage];
  
    if (languageSettings) {
      L10n.load(languageSettings);
      this.scheduleObj.locale = preferredLanguage;
    } else {
      // Handle case when preferred language is not found
      console.warn(`Preferred language "${preferredLanguage}" not found. Falling back to English.`);
      const defaultLanguageSettings = langData["en"];
      if (defaultLanguageSettings) {
        L10n.load(defaultLanguageSettings);
        this.scheduleObj.locale = "en"; // set the locale to the default language
      } else {
        console.error("Default language settings not found.");
      }
    }
  }

Below is what the service does

 setLocalizedCLDR(localizedValue: string) {
    const cldrData = [
      require('cldr-data/supplemental/numberingSystems.json'),
      require(`cldr-data/main/${localizedValue}/ca-gregorian.json`),
      require(`cldr-data/main/${localizedValue}/numbers.json`),
      require(`cldr-data/main/${localizedValue}/timeZoneNames.json`)
    ];
  
    loadCldr(...cldrData);
  }

So, it is similar to what you have but it does not work

This is what is occuring

Vijay Ravi · Answer

Hi Keith,We made
a sincere effort to replicate the reported issue using the shared details. But
unfortunately, we were unable to reproduce the reported issue. To proceed
further, please share a simple issue replication sample since we have not been
able to replicate the issue on our end.Regards,Vijay Ravi

Keith Wells · Answer

So, can you load your data files inside the contractor without issue? Your example always loads the file before the class definition. Do you have an example of loaded a language file from a flat file?

Vijay Ravi · Answer

Hi Keith,We suspect that the data name for the L10 Load may be mismatched, which could cause localization issues. However, this issue does not apply to the toolbar, as indicated in the highlighted code snippet below. Furthermore, we suspect that customizing the DateHeader using dateHeaderTemplate may lead to localization problems[app.component.html] [app.component.ts] L10n.load({ 'fr-CH': { "schedule": { "day": "Journée", "week": "Semaine", "workWeek": "Semaine de travail", "month": "Mois", "year": "An", …. }, } }); Kindly try the suggested solutions and let us know if this works at your end. Regards,Vijay Ravi

Keith Wells · Answer

For the record, it works with fr but not with fr-CH. apparently Syncfusion does not support fr-CH. Toolbar works with fr language but not fr-CH. So I am good going forward.Thanks

Vijay Ravi · Answer

Hi Keith,Sample: https://stackblitz.com/edit/ej2-angular-fr-ch-locale-sample-forked-ajaker?file=src%2Flocale.jsonej2-locale: https://github.com/syncfusion/ej2-localeYou can apply translation to the Schedule Toolbar in fr-CH locale. Based on your shared details we suspect that you languageSettings may be missing the fr-CH culture data or wrong culture code is present. The reported problem happening due to the translations loaded on the L10n load method is not present for fr-CH culture. We suggest you make sure all your fr-CH culture files, and the locale translation file having the respective culture code as highlighted in the below snips. We prepared a working sample with “fr-CH” locale. Try the shared sample and let us know if you need any further assistance.[app.component.ts] import { Component } from '@angular/core'; import { loadCldr, L10n } from '@syncfusion/ej2-base'; declare var require: any; const localeData = require('./locale.json'); loadCldr( require('./cldr-data/supplemental/numberingSystems.json'), require('./cldr-data/main/fr-CH/ca-gregorian.json'), require('./cldr-data/main/fr-CH/numbers.json'), require('./cldr-data/main/fr-CH/timeZoneNames.json') ); L10n.load(localeData); export class AppComponent {} [app..component.html] Regards,Vijay Ravi