Globalization and Localization in ASP.NET MVC Scheduler
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), and by 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, the Scheduler is set to follow the English culture (en-US). If you want to use a culture other than English, follow the steps below.
Install the CLDR-Data package by using the following 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.
Once the CLDR-Data package is installed, create a folder named cldr-data inside the Scripts folder. Then create the folder structure shown below inside the Scripts folder.
Scripts/cldr-data/supplementalScripts/cldr-data/main
The files listed below are required to setup a specific culture for the Scheduler.
- numberingSystems.json
- ca-gregorian.json
- numbers.json
- timeZoneNames.json
- ca-islamic.json
The file numberingSystems.json is available in the location node_modules/cldr-data/supplemental and is common for all cultures. Move this file to the location Scripts/cldr-data/supplemental.
The other required files mentioned above are available in the location node_modules/cldr-data/main/culture_code. In this location, every culture has its files inside a folder named with its language culture code. For example, if you are loading the German culture, the German culture files can be found inside the location node_modules/cldr-data/main/de. Now create a folder named de inside the location Scripts/cldr-data/main and move the files inside it.
Now use the loadCultureFiles method to load the culture-specific CLDR JSON data.
loadCultureFiles('de');
function loadCultureFiles(name) {
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 + '/../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);
}
}Set the culture to Scheduler by using the Locale property.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("550px")
.Locale("fr-CH")
.EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
.SelectedDate(new DateTime(2018, 2, 15))
.Render()
)
<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 + '/../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; }
}Localizing the static Scheduler text
The Localization library allows you to display all the static text, date content, and time mode of the Scheduler in the localized language. To achieve this, set the Locale property of the Scheduler, and define the translation text for the static words of the Scheduler through the load method of the L10n class.
For example, the following code example lets you define the Hungarian translations for all the static words used in the Scheduler.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("550px")
.Locale("hu")
.EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
.SelectedDate(new DateTime(2018, 2, 15))
.Render()
)
<script>
var L10n = ej.base.L10n;
L10n.load({
"hu": {
"schedule": {
"day": "Nap",
"week": "Hét",
"workWeek": "Munkahét",
"month": "Hónap",
"year": "Év",
"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",
"moreEvents": "Több esemény",
"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.",
"occurenceAlert": "Nem lehet átütemezni az ismétlődő találkozó előfordulását, ha átugrik ugyanazon találkozó későbbi előfordulását.",
"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.",
"blockAlert": "Az eseményeket nem lehet ütemezni a blokkolt időtartományon belül.",
"ok": "Rendben",
"yes": "Igen",
"no": "Nem",
"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",
"timelineYear": "Idővonal év",
"expandAllDaySection": "kiterjed",
"collapseAllDaySection": "összeomlás",
"editFollowingEvent": "Következő események",
"deleteTitle": "Esemény törlése",
"editTitle": "Esemény szerkesztése",
"beginFrom": "Kezdje",
"endAt": "Vége",
"searchTimezone": "Időzóna keresése",
"noRecords": "Nincs találat"
},
"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(2023, 2, 14, 9, 30, 0), EndTime = new DateTime(2023, 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
The Scheduler can be used with all valid date formats and by default follows the universal date format MM/dd/yyyy. If the DateFormat property is not specified, the Scheduler uses the locale assigned to it. Since the default locale applied to the Scheduler is en-US, the Scheduler follows the MM/dd/yyyy pattern.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("550px")
.DateFormat("yyyy/MM/dd")
.EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
.SelectedDate(new DateTime(2018, 2, 15))
.Render()
)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(2023, 2, 14, 9, 30, 0), EndTime = new DateTime(2023, 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 the time format
The time format defines how the time value is represented in different string formats in the Scheduler. By default, the time mode of the Scheduler can be either 12-hour or 24-hour format, based entirely 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-hour format automatically. You can also customize the format by using the timeFormat property. To know more about the time format standards, refer to the Date and Time Format section.
The following example demonstrates the Scheduler component in 24-hour format.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("550px")
.TimeFormat("HH:mm")
.EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
.SelectedDate(new DateTime(2018, 2, 15))
.Render()
)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(2023, 2, 14, 9, 30, 0), EndTime = new DateTime(2023, 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; }
}NOTE
The
timeFormatproperty only accepts valid time formats.
Displaying Scheduler in RTL mode
The Scheduler layout and its behavior can be changed according to 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. Its default value is false.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("550px")
.EventSettings(new ScheduleEventSettings { DataSource = ViewBag.datasource })
.EnableRtl(true)
.SelectedDate(new DateTime(2018, 2, 15))
.Render()
)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(2023, 2, 14, 9, 30, 0), EndTime = new DateTime(2023, 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; }
}NOTE
You can refer to our ASP.NET MVC Scheduler feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET MVC Scheduler example to know how to present and manipulate data.