Globalization in Blazor Calendar Component

7 Jul 20221 minute to read

Blazor Calendar component can be localized. Refer to Blazor Localization topic to localize Syncfusion Blazor components.

Customize the localized text

You can change the localized text of particular component by editing the wwwroot/blazor-locale/src/.json file.
In the following code, modified the localized text of today button in de culture.

[wwwroot/blazor-locale/src/de.json]

{
  "de": {
    "calendar": {
     "today": "Heutiges Datum"
    }
  }
}

Right-To-Left

The Calendar supports RTL (right-to-left) functionality for languages like Arabic and Hebrew to display the text in the right-to-left direction. Use the EnableRtl property to set the RTL direction.

The following code example initializes the Calendar component in Arabic culture.

@using Syncfusion.Blazor.Calendars
@inject HttpClient Http;

<SfCalendar TValue="DateTime?" Locale="ar" EnableRtl=true></SfCalendar>

@code {
    [Inject]
    protected IJSRuntime JsRuntime { get; set; }
    protected override async Task OnInitializedAsync()
    {
        this.JsRuntime.Sf().LoadLocaleData(await Http.GetJsonAsync<object>("blazor-locale/src/ar.json")).SetCulture("ar");
    }
}