Search results

Globalization in ASP.NET Core Schedule control

The Scheduler integrates different date-time formats and cultures, which allows it to function globally, thus meeting the diverse needs of different regions.

You can adapt the Scheduler to various languages by parsing and formatting the date or number (Internationalization), adding culture specific customization and translation to the text (Localization).

Globalization

The Internationalization library provides support for formatting and parsing the number, date, and time by using the official Unicode CLDR JSON data and also provides the loadCldr method to load the culture specific CLDR JSON data.

By default, Scheduler is set to follow the English culture (‘en-US’). If you want to go with different culture other than English, follow the below steps.

  • Install the CLDR-Data package by using the below command (it installs the CLDR JSON data). For more information about CLDR-Data, refer to this link.
npm install cldr-data --save

Once the package is installed, you can find the culture specific JSON data under the location node_modules\cldr-data.

  • Now use the loadCultureFiles method to load the culture specific CLDR JSON data.

Refer the culture files directly from node_modules\cldr-data location as like the below code example.

    function loadCultureFiles(de) {
        var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json'];
        var loader = ej.base.loadCldr;
        var loadCulture = function (prop) {
            var val, ajax;
            ajax = new ej.base.Ajax(location.origin + '/../node_modules/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);
        }
    }
  • Set the culture to Scheduler by using the locale property.
tagHelper
data.cs
@using Syncfusion.EJ2.Schedule

<ejs-schedule id="schedule" width="100%" height="550px" locale="fr-CH">
    <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
</ejs-schedule>

<script>
    loadCultureFiles('fr-CH');
    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 + '/../wwwroot/cldr-data/supplemental/' + files[prop], 'GET', false);
            } else {
                ajax = new ej.base.Ajax(location.origin + '/../wwwroot/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);
        }
    }
</script>
public ActionResult Index()
{
    ViewBag.datasource = GetScheduleData();
    return View();
}

public List<AppointmentData> GetScheduleData()
{
    List<AppointmentData> appData = new List<AppointmentData>();
    appData.Add(new AppointmentData
    { Id = 1, Subject = "Explosion of Betelgeuse Star", StartTime = new DateTime(2018, 2, 14, 9, 30, 0), EndTime = new DateTime(2018, 2, 14, 11, 0, 0) });
    return appData;
}
    
public class AppointmentData
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
}

Localizing the static Scheduler text

Localization library allows to display all the static text, date content, and time mode of the Scheduler following the localized language. To achieve this, set the locale property of Scheduler, as well as define the translation text of static words of Scheduler through the load method of L10n class.

For example, the following code example lets you to define the Hungarian translation words for all the static words used in Scheduler.

tagHelper
data.cs
@using Syncfusion.EJ2.Schedule

<ejs-schedule id="schedule" width="100%" height="550px" locale="fr-CH">
    <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
</ejs-schedule>

<script>
    var L10n = ej.base.L10n;
    L10n.load({
        "hu": {
            "schedule": {
                "day": "Nap",
                "week": "Hét",
                "workWeek": "Munkahét",
                "month": "Hónap",
                "agenda": "Napirend",
                "weekAgenda": "Hét menetrend",
                "workWeekAgenda": "Munkahét napirend",
                "monthAgenda": "Havi menetrend",
                "today": "Ma",
                "noEvents": "Nincs esemény",
                "emptyContainer": "Ezen a napon nincsenek események.",
                "allDay": "Egész nap",
                "start": "Rajt",
                "end": "vég",
                "more": "több",
                "close": "Bezárás",
                "cancel": "Megszünteti",
                "noTitle": "(Nincs cím)",
                "delete": "Töröl",
                "deleteEvent": "Esemény törlése",
                "deleteMultipleEvent": "Több esemény törlése",
                "selectedItems": "A kiválasztott elemek",
                "deleteSeries": "Sorozat törlése",
                "edit": "szerkesztése",
                "editSeries": "Szerkesztés",
                "editEvent": "Esemény szerkesztése",
                "createEvent": "teremt",
                "subject": "Tantárgy",
                "addTitle": "Cím hozzáadása",
                "moreDetails": "További részletek",
                "save": "Mentés",
                "editContent": "Csak ezt az eseményt vagy egész sorozatot szeretné szerkeszteni?",
                "deleteRecurrenceContent": "Csak ezt az eseményt vagy egész sorozatot szeretné törölni?",
                "deleteContent": "Biztosan törölni szeretné ezt az eseményt?",
                "deleteMultipleContent": "Biztosan törli a kiválasztott eseményeket?",
                "newEvent": "Új esemény",
                "title": "Cím",
                "location": "Elhelyezkedés",
                "description": "Leírás",
                "timezone": "Időzóna",
                "startTimezone": "Indítsa el az időzónát",
                "endTimezone": "Időzóna vége",
                "repeat": "Ismétlés",
                "saveButton": "Mentés",
                "cancelButton": "Megszünteti",
                "deleteButton": "Töröl",
                "recurrence": "Ismétlődés",
                "wrongPattern": "Az ismétlődési minta nem érvényes.",
                "seriesChangeAlert": "A sorozat egyes példányaiban végrehajtott módosítások törlésre kerülnek, és ezek az események ismét megegyeznek a sorozattal.",
                "createError": "Az esemény időtartamának rövidebbnek kell lennie, mint a gyakorisága. Rövidítse az időtartamot, vagy változtassa meg az ismétlődési esemény szerkesztőjének ismétlődési mintáját.",
                "recurrenceDateValidation": "Néhány hónap kevesebb, mint a kiválasztott dátum. Ezekben a hónapokban az esemény a hónap utolsó napjára esik.",
                "sameDayAlert": "Ugyanezen esemény két eseménye nem fordulhat elő ugyanazon a napon.",
                "editRecurrence": "Ismétlés szerkesztése",
                "repeats": "ismétlődés",
                "alert": "Éber",
                "startEndError": "A kiválasztott befejezési dátum a kezdő dátum előtt történik.",
                "invalidDateError": "A megadott dátumérték érvénytelen.",
                "ok": "Rendben",
                "occurrence": "Esemény",
                "series": "Sorozat",
                "previous": "Előző",
                "next": "Következő",
                "timelineDay": "Idővonal napja",
                "timelineWeek": "Idősor-hét",
                "timelineWorkWeek": "Idővonal munkahét",
                "timelineMonth": "Idővonal hónap"
            },
            "recurrenceeditor": {
                "none": "Egyik sem",
                "daily": "Napi",
                "weekly": "Heti",
                "monthly": "Havi",
                "month": "Hónap",
                "yearly": "Évi",
                "never": "Soha",
                "until": "Amíg",
                "count": "Számol",
                "first": "Első",
                "second": "Második",
                "third": "Harmadik",
                "fourth": "Negyedik",
                "last": "Utolsó",
                "repeat": "Ismétlés",
                "repeatEvery": "Ismételje meg minden",
                "on": "Ismétlés",
                "end": "vég",
                "onDay": "Nap",
                "days": "Napok)",
                "weeks": "Hét (ok)",
                "months": "Hónap (ok)",
                "years": "Évek)",
                "every": "minden",
                "summaryTimes": "idő (s)",
                "summaryOn": "tovább",
                "summaryUntil": "amíg",
                "summaryRepeat": "ismétlődés",
                "summaryDay": "napok)",
                "summaryWeek": "heti (s)",
                "summaryMonth": "hónap (ok)",
                "summaryYear": "évek)",
                "monthWeek": "Hónap",
                "monthPosition": "Havi pozíció",
                "monthExpander": "Hónaposító",
                "yearExpander": "Év bővítő",
                "repeatInterval": "Ismételje meg az intervallumot"
            },
            "calendar": {
                "today": "Ma"
            }
        }
    });
    loadCultureFiles('hu');
    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 + '/../Scripts/cldr-data/supplemental/' + files[prop], 'GET', false);
            } else {
                ajax = new ej.base.Ajax(location.origin + '/../Scripts/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);
        }
    }
</script>
public ActionResult Index()
{
    ViewBag.datasource = GetScheduleData();
    return View();
}

public List<AppointmentData> GetScheduleData()
{
    List<AppointmentData> appData = new List<AppointmentData>();
    appData.Add(new AppointmentData
    { Id = 1, Subject = "Explosion of Betelgeuse Star", StartTime = new DateTime(2018, 2, 14, 9, 30, 0), EndTime = new DateTime(2018, 2, 14, 11, 0, 0) });
    return appData;
}
    
public class AppointmentData
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
}

Setting date format

Scheduler can be used with all valid date formats and by default it follows the universal date format “MM/dd/yyyy”. If the dateFormat property is not specified particularly, then it will work based on the locale that is assigned to the Scheduler. As the default locale applied on Scheduler is “en-US”, this makes it to follow the “MM/dd/yyyy” pattern.

tagHelper
data.cs
@using Syncfusion.EJ2.Schedule

<ejs-schedule id="schedule" width="100%" height="550px" dateFormat="yyyy/MM/dd" selectedDate="new DateTime(2018, 2, 15)">
    <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
</ejs-schedule>
public ActionResult Index()
{
    ViewBag.datasource = GetScheduleData();
    return View();
}

public List<AppointmentData> GetScheduleData()
{
    List<AppointmentData> appData = new List<AppointmentData>();
    appData.Add(new AppointmentData
    { Id = 1, Subject = "Explosion of Betelgeuse Star", StartTime = new DateTime(2018, 2, 14, 9, 30, 0), EndTime = new DateTime(2018, 2, 14, 11, 0, 0) });
    return appData;
}
    
public class AppointmentData
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
}

Time mode

The time mode of the Scheduler can be either 12 or 24 hours format which is completely based on the locale set to the Scheduler. Since the default locale value of the Scheduler is en-US, the time mode will be set to 12 hours format automatically.

Displaying Scheduler in RTL mode

The Scheduler layout and its behavior can be changed as per the common RTL (Right to Left) conventions by setting enableRtl to true. By doing so, the Scheduler will display its usual layout from right to left. It’s default value is false.

tagHelper
data.cs
@using Syncfusion.EJ2.Schedule

<ejs-schedule id="schedule" width="100%" height="550px" enableRtl="true" selectedDate="new DateTime(2018, 2, 15)">
    <e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
</ejs-schedule>
public ActionResult Index()
{
    ViewBag.datasource = GetScheduleData();
    return View();
}

public List<AppointmentData> GetScheduleData()
{
    List<AppointmentData> appData = new List<AppointmentData>();
    appData.Add(new AppointmentData
    { Id = 1, Subject = "Explosion of Betelgeuse Star", StartTime = new DateTime(2018, 2, 14, 9, 30, 0), EndTime = new DateTime(2018, 2, 14, 11, 0, 0) });
    return appData;
}
    
public class AppointmentData
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
}

See Also