Search results

Globalization and Localization

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.

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.

  • Set the culture by using the SetCulture property.

  • 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. Then copy the required cldr-data file into wwwroot\cldr-data folder. Use LoadCldrData method to load the culture specific CLDR JSON data.

  • You can download the locale definition of Blazor components from this link. Once downloaded, copy the required local definition file into wwwroot\ej2-locale folder. Use LoadLocaleData method to load the locale definitions.
@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Schedule
@using Microsoft.JSInterop

<EjsSchedule TValue="AppointmentData" Height="650px">
</EjsSchedule>

@code {
    [Inject]
    IJSRuntime JsRuntime { get; set; }
    protected override void OnAfterRender(bool firstRender)
    {
         this.JsRuntime.Ejs().LoadLocaleData("wwwroot/ej2-locale/src/de.json").SetCulture("de").LoadCldrData(new string[] { "wwwroot/cldr-data/main/de/ca-gregorian.json", "wwwroot/cldr-data/main/de/timeZoneNames.json", "wwwroot/cldr-data/main/de/numberingSystems.json" });
    }
    public class AppointmentData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public string Location { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public string Description { get; set; }
        public bool IsAllDay { get; set; }
        public string RecurrenceRule { get; set; }
        public string RecurrenceException { get; set; }
        public Nullable<int> RecurrenceID { 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.

@using Syncfusion.EJ2.Blazor.Schedule

<EjsSchedule TValue="AppointmentData" Height="650px" DateFormat="yyyy/MM/dd">
</EjsSchedule>
@code{
    public class AppointmentData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public string Location { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public string Description { get; set; }
        public bool IsAllDay { get; set; }
        public string RecurrenceRule { get; set; }
        public string RecurrenceException { get; set; }
        public Nullable<int> RecurrenceID { 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.

@using Syncfusion.EJ2.Blazor
@using Syncfusion.EJ2.Blazor.Schedule
@using Microsoft.JSInterop

<EjsSchedule TValue="AppointmentData" Height="650px" EnableRtl="true">
</EjsSchedule>

@code {
    [Inject]
    IJSRuntime JsRuntime { get; set; }
    protected override void OnAfterRender(bool firstRender)
    {
         this.JsRuntime.Ejs().LoadLocaleData("wwwroot/ej2-locale/src/ar.json").SetCulture("ar").LoadCldrData(new string[] { "wwwroot/cldr-data/main/ar/ca-gregorian.json", "wwwroot/cldr-data/main/ar/timeZoneNames.json", "wwwroot/cldr-data/main/ar/numberingSysytems.json", "wwwroot/cldr-data/main/ar/numbers.json" })
    }
    public class AppointmentData
    {
        public int Id { get; set; }
        public string Subject { get; set; }
        public string Location { get; set; }
        public DateTime StartTime { get; set; }
        public DateTime EndTime { get; set; }
        public string Description { get; set; }
        public bool IsAllDay { get; set; }
        public string RecurrenceRule { get; set; }
        public string RecurrenceException { get; set; }
        public Nullable<int> RecurrenceID { get; set; }
    }
}

See Also