Globalization change ejs-schedule to fr-Fr

[Bilal]

This is my schedule component from SyncFusion,

<ejs-schedule
      :key="scheduleKey"
      height="90vh"
      width="100%"
      :selectedDate="selectedDate"
      :eventSettings="eventSettings"
      currentView="Month">
      <e-views>
        <e-view option="Month"></e-view>
        <e-view option="Agenda"></e-view>
      </e-views>
    </ejs-schedule>

I have imported everything and the data is displayed correctly

import {
        ScheduleComponent as EjsSchedule,
        ViewsDirective as EViews,
        ViewDirective as EView,
        ResourcesDirective as EResources,
        ResourceDirective as EResource,
        Day,
        Week,
        WorkWeek,
        Month,
        Agenda,
      } from "@syncfusion/ej2-vue-schedule";

    //...

The problem I have is the language, I'm trying to change it to 'fr-Fr'.
I tried to add locale="fr-FR" to the schudle props, and the translation object to the L10n.load().
I also imported the needed files as syncfusion says in the docs

    import*as gregorian from"./culture-files/ca-gregorian.json";

    import*as islamic from"./culture-files/ca-islamic.json";

    import*as currencies from"./culture-files/currencies.json";

    import*as numbers from"./culture-files/numbers.json";

    import*as timeZoneNames from"./culture-files/timeZoneNames.json";

    import*as numberingSystems from"./culture-files/timeZoneNames.json";

    loadCldr(

      numberingSystems,

      gregorian,

      numbers,

      islamic,

      currencies,

      timeZoneNames

    );

I also use setCulture to change the datepicker and grid to FR

setCulture("fr-FR");
L10n.load({
  "fr-FR":{
    datepicker:{
      today:"Aujourd'hui",
      placeholder:"Choisissez une date",
    },
    grid:{
      EmptyRecord:"Aucun enregistrement à afficher",
      // ..
    },
  },
});

the problem I Have when I do all this I get a loader in ejs-schedule

[Ashokkumar Karuppasamy]

Hi Bilal,

We suspect that the locale name is not properly prepared. Therefore, we have created a sample in Vue Schedule using the 'fr' locale. The attached code snippet and the following example demonstrate the solution. Please give it a try, and feel free to reach out if you need further assistance.

Sample: https://stackblitz.com/edit/schedule-locale-sample-gdfrmx?file=locale.json,src%2FApp.vue
 

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 –save

Once 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.

<script>

    import { extend } from '@syncfusion/ej2-base';

    import { scheduleData, timelineData } from './datasource';

    import { ScheduleComponent, ViewDirective, ViewsDirective, TimelineMonth, TimelineViews, Agenda, Resize, DragAndDrop } from "@syncfusion/ej2-vue-schedule";

    import { DatePickerComponent } from '@syncfusion/ej2-vue-calendars';

    import { loadCldr, L10n, setCulture } from '@syncfusion/ej2-base';

    const localeData = require('../locale.json');

    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'),

        require('./cldr-data/main/fr/numbers.json')

      );

      L10n.load(localeData);

    export default {

        components: {

          'ejs-schedule': ScheduleComponent,

          'e-view': ViewDirective,

          'e-views': ViewsDirective,

          'ejs-datepicker': DatePickerComponent

        },

        data: function () {

            return {

                eventSettings: {

                    dataSource: extend([], scheduleData.concat(timelineData), null, true),

                },

                selectedDate: new Date(2021, 0, 10),

                currentView: 'TimelineWeek',

                workDays: [0, 1, 2, 3, 4, 5],

                locale: 'fr'

            }

        },

        provide: {

            schedule: [TimelineViews, TimelineMonth, Agenda, Resize, DragAndDrop]

        }

    }

</script>

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

4. Set the locale property to the Schedule

                <ejs-schedule id='Schedule'  :locale='locale' height="550px" :selectedDate='selectedDate' :currentView='currentView' :workDays='workDays' :eventSettings='eventSettings'>   

                    <e-views>

                        <e-view option="TimelineDay"></e-view>

                        <e-view option="TimelineWeek"></e-view>

                        <e-view option="TimelineWorkWeek"></e-view>

                        <e-view option="TimelineMonth"></e-view>

                        <e-view option="Agenda"></e-view>

                    </e-views>

                </ejs-schedule>

Please don't hesitate to reach out if you have any further questions or concerns.

Regards,

Ashok

[Bilal]

I loaded the data but I'm still having the same problem,
I am getting:

TypeError: can't convert undefined to object

    getDayNames schedule.js:474

    createHeaderCell month.js:328

this is the cldr-data on my src project

 and this is what I'm doing in my code

  <template>

  // ...

      <ejs-schedule

        :key="scheduleKey"

        ref="schedule"

        height="550px"

        :views="views"

        :selectedDate="selectedDate"

        currentView="Month"

        :eventSettings="eventSettings"

        :locale="locale"

        :firstDayOfWeek="1">

        <e-views>

          <e-view option="TimelineMonth"></e-view>

          <e-view option="Month"></e-view>

          <e-view option="Agenda"></e-view> </e-views

      ></ejs-schedule>

  </template>

  <script setup>

import { onMounted, provide, ref } from "vue";

  import {

    ScheduleComponent as EjsSchedule,

    ViewsDirective as EViews,

    ViewDirective as EView,

    ResourcesDirective as EResources,

    ResourceDirective as EResource,

    Day,

    Week,

    WorkWeek,

    Month,

    Agenda,

  } from "@syncfusion/ej2-vue-schedule";

  import { loadCldr, L10n, setCulture } from "@syncfusion/ej2-base";

  import { onMounted, provide, ref } from "vue";

  import localeData from "@/cldr-data/locale.json";

  import numberingSystems from "@/cldr-data/numberingSystems.json";

  import caGregorian from "@/cldr-data/ca-gregorian.json";

  import numbers from "@/cldr-data/numbers.json";

  import timeZoneNames from "@/cldr-data/timeZoneNames.json";

  console.log("localeData", localeData);

  console.log("numberingSystems", numberingSystems);

  console.log("caGregorian", caGregorian);

  console.log("numbers", numbers);

  console.log("timeZoneNames", timeZoneNames);

  console.log("numbers", numbers);

  loadCldr(numberingSystems, caGregorian, numbers, timeZoneNames, numbers);

  L10n.load(localeData);

  const locale = "fr";

  //...

  provide("schedule", [Day, Week, WorkWeek, Month, Agenda]);

  </script>

[Swathi Ravi]

Hi Bilal,

 

We have created a sample using the French locale, and we did not encounter any issues. Please refer to our shared sample for your reference.

 

Regards,

Swathi Ravi

Attachment: vuecompositionschedulefrenchsample_7db796de.zip

[Mustapha]

Hi Swathi Ravi.
I am still facing the same issue.

I think I know what might be causing it.
In my main.js I have already set culture to fr-FR

  setCulture("fr-FR");

  L10n.load({

    "fr-FR": {

      datepicker: {

        today: "Aujourd'hui",

        placeholder: "Choisissez une date",

      },

      grid: {

        EmptyRecord: "Aucun enregistrement à afficher",

        True: "true",

        False: "false",

        InvalidFilterMessage: "Données de filtre non valides",

        //...

      },

      calendar: {

        today: "Aujourd'hui",

      },

  }})

and when I try to translate the schedule it gives me the loading error as before,

Is there any way to globalize all the Syncusion components?

[Ashokkumar Karuppasamy]

Hi Bilal,

Q1) I am still facing the same issue.

Based on the shared details, we were unable to reproduce the issues or problems you mentioned. Although we have downloaded the CLDR data, we couldn’t find the locale “Fr-FR”. Additionally, we have set the culture in the main.js file and did not encounter the issues.

We kindly request that you provide the following details, as this information will greatly assist us in understanding and resolving the issue effectively.

• Shared all schedule related codes.
• shared the Fr-FR locale and CLDR data file.
• How to set the setCulture in main.js file shared the main.js  code.
• Please share a sample that replicates the issue.
• share issues replicated video.

Sample: https://stackblitz.com/edit/schedule-locale-sample-vu3x4x?file=locale.json,src%2FApp.vue,src%2Fmain.js,src%2Fdatasource.js

[main.js]

import { createApp } from 'vue'

import App from './App.vue'

import { L10n, setCulture } from '@syncfusion/ej2-base';

const localeData = require('../locale.json');

setCulture("fr")

L10n.load(localeData);

createApp(App).mount('#app')

 

Q2) Is there any way to globalize all the Syncusion components?

Kindly refer to the below user guide (UG) for instructions on how to change globalization settings in Syncfusion components. Let us know if you need any further assistance.

https://ej2.syncfusion.com/vue/documentation/common/localization#changing-current-locale

Regards,
Ashok