Globalization in Blazor Scheduler component

28 Jul 2021 / 5 minutes to read

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.

Blazor Server Side

The static local texts in the Scheduler component can be changed to other culture by referring the Resource file. You can refer more details about localization here. By default, Scheduler is set to follow the English culture (‘en-US’). The following steps explains how to render the Scheduler in German culture (‘de-DE’).

Open the Startup.cs file and add the below configuration in the ConfigureServices function as follows.

using Syncfusion.Blazor;
using System.Globalization;
using Microsoft.AspNetCore.Localization;
using SchedulerLocalization.Shared;

namespace SchedulerLocalization
{
public class Startup
{
    ....
    ....
    public void ConfigureServices(IServiceCollection services)
    {
        ....
        ....
        services.AddSyncfusionBlazor();
        services.AddLocalization(options => options.ResourcesPath = "Resources");
        services.Configure<RequestLocalizationOptions>(options =>
        {
            // define the list of cultures your app will support
            var supportedCultures = new List<CultureInfo>()
            {
                new CultureInfo("de-DE")
            };
            // set the default culture
            options.DefaultRequestCulture = new RequestCulture("de-DE");
            options.SupportedCultures = supportedCultures;
            options.SupportedUICultures = supportedCultures;
            options.RequestCultureProviders = new List<IRequestCultureProvider>() {
             new QueryStringRequestCultureProvider() // Here, You can also use other localization provider
            };
        });
        services.AddSingleton(typeof(ISyncfusionStringLocalizer), typeof(SampleLocalizer));
    }
}
}

Add UseRequestLocalization() middle-ware in Configure method in Startup.cs file to get browser Culture Information.

Then, write a class by inheriting ISyncfusionStringLocalizer interface and override the ResourceManager property to get the resource file details from the application end.

using Syncfusion.Blazor;

namespace SchedulerLocalization
{
 public class SampleLocalizer : ISyncfusionStringLocalizer
{
    public string GetText(string key)
    {
        return this.ManageResourceManagerr.GetString(key);
    }

    public System.Resources.ResourceManager ResourceManager
    {
        get
        {
            return SchedulerLocalization.Resources.SyncfusionBlazorLocale.ResourceManager;
        }
    }
}
}

Add .resx file to Resource folder and that file contains the key value pair of locale content in the following format.

<Component_Name>_<Feature_Name>_<Locale_Key>

Finally, add the Scheduler component in razor page as in the following code example.

@using Syncfusion.Blazor.Schedule

<SfSchedule TValue="AppointmentData" Height="650px" SelectedDate="@(new DateTime(2020, 2, 14))">
<ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
</SfSchedule>

@code{
List<AppointmentData> DataSource = new List<AppointmentData>
{
    new AppointmentData { Id = 1, Subject = "Paris", StartTime = new DateTime(2020, 2, 13, 10, 0, 0) , EndTime = new DateTime(2020, 2, 13, 12, 0, 0) },
    new AppointmentData { Id = 2, Subject = "Germany", StartTime = new DateTime(2020, 2, 15, 10, 0, 0) , EndTime = new DateTime(2020, 2, 15, 12, 0, 0) }
};
public class AppointmentData
{
    public int Id { get; set; }
    public string Subject { get; set; }
    public DateTime StartTime { get; set; }
    public DateTime EndTime { get; set; }
}
}

Blazor Web Assembly

You can refer [here] (../../common/localization/#enable-localization-in-blazor-webassembly-application) to enable the localization in Blazor Web Assembly.

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 system’s local culture. As the system’s local culture is “en-US”, this makes it to follow the “MM/dd/yyyy” pattern.

@using Syncfusion.Blazor.Schedule

<SfSchedule TValue="AppointmentData" Height="650px" DateFormat="yyyy/MM/dd">
<ScheduleViews>
    <ScheduleView Option="View.Day"></ScheduleView>
    <ScheduleView Option="View.Week"></ScheduleView>
    <ScheduleView Option="View.WorkWeek"></ScheduleView>
    <ScheduleView Option="View.Month"></ScheduleView>
    <ScheduleView Option="View.Agenda"></ScheduleView>
</ScheduleViews>
</SfSchedule>
@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 system’s local culture. And also the Scheduler supported to customize the time mode using the TimeFormat property.

@using Syncfusion.Blazor.Schedule

<SfSchedule TValue="AppointmentData" Height="650px" TimeFormat="T">
<ScheduleViews>
    <ScheduleView Option="View.Day"></ScheduleView>
    <ScheduleView Option="View.Week"></ScheduleView>
    <ScheduleView Option="View.WorkWeek"></ScheduleView>
    <ScheduleView Option="View.Month"></ScheduleView>
    <ScheduleView Option="View.Agenda"></ScheduleView>
</ScheduleViews>
</SfSchedule>

@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; }
}
}

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.Blazor.Schedule

<SfSchedule TValue="AppointmentData" Height="650px" EnableRtl="true">
<ScheduleViews>
    <ScheduleView Option="View.Day"></ScheduleView>
    <ScheduleView Option="View.Week"></ScheduleView>
    <ScheduleView Option="View.WorkWeek"></ScheduleView>
    <ScheduleView Option="View.Month"></ScheduleView>
    <ScheduleView Option="View.Agenda"></ScheduleView>
</ScheduleViews>
</SfSchedule>

@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; }
}
}