Localization for multiple languages (user preferences)

[Matías Gamarra]

Hi,

I did the localization work, copying the CLDR-data folder from a sample shared here.

Now, for the actual texts, there is no similar way to do it.

I found the github resource for the localization texts here: https://github.com/syncfusion/ej2-locale/tree/master

In the samples, you load the json with the control text... so if I have 5 supported languages, I have to load the json with the 5 translations anytime I open the page where the Scheduler is?  

And to select which to use, I set:   .Locate("en")  in the control.

Is this the right way to do it?

[Vijay Ravi]

Hi Matías,
 

We have reviewed and validated your query based on the details you provided. First, please ensure that the required language files are properly added in the cldr-data directory. Initially, load the default culture, and then you can dynamically switch to other cultures as needed. Please refer to the code snippet and sample shared below for guidance.

[index.cshmtl]
 

@{

    ViewBag.Title = "Home Page";

}

 

@using Syncfusion.EJ2.Schedule

@using Syncfusion.EJ2.DropDowns

@Html.EJS().DropDownList("language").DataSource((IEnumerable<object>)Model).Change("onLanguageChange").Render()

 

 

@(Html.EJS().Schedule("schedule")

    .Width("100%")

    .Height("550px")

    .Locale("en")

    .EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })

    .SelectedDate(new DateTime(2022, 2, 15))

    .Render()

)

 

<script>

    var L10n = ej.base.L10n;

    L10n.load({

        "fr-CH": {

            "schedule": {

                "day": "Journée",

                "week": "Semaine",

                "workWeek": "Semaine de travail",

                "month": "Mois",
                ….

          },

        "en": {

            "schedule": {

                "day": "Day",

                "week": "Week",

                "workWeek": "Work Week",

                "month": "Month",
                …..

             },

            "calendar": {

                "today": "Today"

            }

        }

    });

    loadCultureFiles('en');

    function loadCultureFiles(name) {

        var files = ['ca-gregorian.json', 'numberingSystems.json', 'numbers.json', 'timeZoneNames.json', 'ca-islamic.json'];

        var loader = ej.base.loadCldr;

        var loadCulture = function (prop) {

            var val, ajax;

            if (files[prop] === 'numberingSystems.json') {

                ajax = new ej.base.Ajax(location.origin + '/../Content/cldr-data/supplemental/' + files[prop], 'GET', false);

            } else {

                ajax = new ej.base.Ajax(location.origin + '/../Content/cldr-data/main/' + name + '/' + files[prop], 'GET', false);

            }

            ajax.onSuccess = function (value) {

                val = value;

            };

            ajax.send();

            loader(JSON.parse(val));

        };

        for (var prop = 0; prop < files.length; prop++) {

            loadCulture(prop);

        }

    }

 

    function onLanguageChange(args) {

        var selectedLanguage = args.itemData.value;

        var locale = selectedLanguage === "French" ? "fr-CH" : "en";

        loadCultureFiles(locale);

        var scheduleObj = document.getElementById('schedule').ej2_instances[0];

        scheduleObj.locale = locale;

    }

</script>

you can add the proper locale files into the cldr-data folder

  

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay

Attachment: mvc_schedule_localization_ff12e2ad.zip

[Matías Gamarra]

Thanks!

I'm using something similar, but instead of hardcoding the json for texts, I do as follows:

    function loadLocalizationTexts(name) {

        var ajax = new ej.base.Ajax('Scripts/ej2/localization/' + name + '.json', 'GET', true);

        ajax.onSuccess = function (value) {

           ej.base.L10n.load(value);

        };

        ajax.send();

    }

The 'name' parameter is the culture.

But I don't think doing this every time the scheduler control is rendered is correct.

Is there anything to check if the json files (localization texts) are already loaded?

Like, checking something in the ' ej.base.L10n' object to know if I need to load the texts.

[Vijay Ravi]

Hi Matias,
 

To ensure that localization texts are not redundantly loaded, you can implement a caching mechanism for the loaded locales. By maintaining a loadedLocales object, you can track which locales have already been processed. Before loading any localization files, the loadCultureFiles function checks this cache to determine if the locale has already been loaded. If the locale is present in the cache, the function exits early, thereby avoiding duplicate loading. Once the culture files for a locale are successfully loaded, the locale is then added to the loadedLocales cache for future reference.

[index.razor]
 

@using Syncfusion.EJ2.Schedule

@(Html.EJS().Schedule("schedule")

    .Width("100%")

    .Height("550px")

    .Locale("en")

    .EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })

    .SelectedDate(new DateTime(2022, 2, 15))

    .Render()

)

<script>

    var L10n = ej.base.L10n;

    var loadedLocales = {};

    L10n.load({

        "fr-CH": {

            "schedule": {

                "day": "Journée",

                "week": "Semaine",

                "workWeek": "Semaine de travail",

                "month": "Mois",

                // ...

            }

        },

        "en": {

            "schedule": {

                "day": "Day",

                "week": "Week",

                "workWeek": "Work Week",

                "month": "Month",

                // ...

            },

            "calendar": {

                "today": "Today"

            }

        }

    });

    loadCultureFiles('en');

    function loadCultureFiles(name) {

        if (loadedLocales[name]) {

            return;

        }

        var files = ['ca-gregorian.json', 'numberingSystems.json', 'numbers.json', 'timeZoneNames.json', 'ca-islamic.json'];

        var loader = ej.base.loadCldr;

        var loadCulture = function (prop) {

            var val, ajax;

            if (files[prop] === 'numberingSystems.json') {

                ajax = new ej.base.Ajax(location.origin + '/../Content/cldr-data/supplemental/' + files[prop], 'GET', false);

            } else {

                ajax = new ej.base.Ajax(location.origin + '/../Content/cldr-data/main/' + name + '/' + files[prop], 'GET', false);

            }

            ajax.onSuccess = function (value) {

                val = value;

            };

            ajax.send();

            loader(JSON.parse(val));

        };

        for (var prop = 0; prop < files.length; prop++) {

            loadCulture(prop);

        }

        loadedLocales[name] = true;

    }

    function onLanguageChange(args) {

        var selectedLanguage = args.itemData.value;

        var locale = selectedLanguage === "French" ? "fr-CH" : "en";

        loadCultureFiles(locale);

        var scheduleObj = document.getElementById('schedule').ej2_instances[0];

        scheduleObj.locale = locale;

    }

</script>
 

Don't hesitate to get in touch if you require further help or more information.

Regards,

Vijay

Attachment: modified_muv_schedule_application_28af1926.zip