Skip to content
Merged
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 60 additions & 0 deletions knowledge-base/datepicker-kb-change-starting-day-of-week.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
---
title: How to Change the Default Starting Day of the Week
description: Learn how to set the first day of the week to different from the default one in the Telerik Blazor DatePicker component by modifying the current culture settings.
type: how-to
page_title: How to Change the Default Starting Day of the Week
slug: datepicker-kb-change-starting-day-of-week
tags: datepicker, blazor, cultureinfo, firstdayofweek
res_type: kb
ticketid: 1665695
---

## Environment
<table>
<tbody>
<tr>
<td>Product</td>
<td>DatePicker for Blazor, Calendar for Blazor</td>
</tr>
</tbody>
</table>

## Description

This KB article answers the following questions:
* How can I change the first day of the week in the DatePicker?
* Is it possible to set different day as the start of the week from the default one in the Telerik DatePicker for Blazor?
* What steps should I follow to modify the start of the week in a DatePicker component?

## Solution

To set the start of the week to dfferent one in the Telerik DatePicker for Blazor, override the `FirstDayOfWeek` property of the current culture in your application. Follow the steps below to implement this solution:

1. Include the necessary namespaces for [globalization]({%slug globalization-formats%}) in your component.
2. Add the Telerik DatePicker component to your razor page.
3. Override the `OnInitialized` method to change the current culture's `FirstDayOfWeek` to the desired one.

````CSHTML

@using System.Globalization

<TelerikDatePicker @bind-Value="@Date"/>

@code {
private DateTime Date { get; set; } = DateTime.Now;

protected override void OnInitialized()
{
var cultureInfo = new CultureInfo("en-US");
cultureInfo.DateTimeFormat.FirstDayOfWeek = DayOfWeek.Monday;
CultureInfo.DefaultThreadCurrentCulture = cultureInfo;
CultureInfo.DefaultThreadCurrentUICulture = cultureInfo;
}
}
````

By setting the `FirstDayOfWeek` property to `DayOfWeek.Monday`, the DatePicker will start the week with Monday based on the modified culture settings.

## See Also

- [DatePicker Overview Documentation]({%slug components/datepicker/overview%})
Loading