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
.
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’).
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.
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;
}
}
}
}
Resource
folder and that file contains the key value pair of locale content in the following format.<Component_Name>_<Feature_Name>_<Locale_Key>
@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; }
}
}
You can refer [here] (../../common/localization/#enable-localization-in-blazor-webassembly-application) to enable the localization in Blazor Web Assembly.
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">
</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; }
}
}
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">
</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; }
}
}
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
@using Syncfusion.Blazor.Schedule
<SfSchedule TValue="AppointmentData" Height="650px" EnableRtl="true">
</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; }
}
}