Globalization in Blazor Scheduler Component
2 Dec 202110 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] (https://blazor.syncfusion.com/documentation/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; }
}
}