blazor-docs/knowledge-base/calendar-hide-weekends.md

title	description	type	page_title	slug	position	tags	ticketid	res_type
Hide Weekends in the Calendar	How to hide weekend days in the Blazor Calendar?	how-to	Hide Weekends in the Calendar	calendar-kb-hide-weekends		hide, weekends, calendar, datepicker, datetimepicker	1543661	kb

Environment

Product

Calendar for Blazor, DatePicker for Blazor, DateTimePicker for Blazor

Description

I want to hide the weekends in the Calendar Month view, so only the week days are visible.

Solution

It is possible to hide weekends and display only the week days in the Calendar Month view with custom CSS.

By default, the first column of the view contains Sundays and the last one contains Saturdays. You can use that to target the specific n-th child of the table rows and hide them. In addition, you can expand the width of the visible cells to fill the layout of the view.

caption Add some custom CSS to hide the weekends in Calendar Month view.

<style>
/* Hide the first and the last cell of every row. By default, Sunday is first and Saturday is last (seventh). 
If needed, you can configure the selectors to target and customize other specific n-th child.*/

   .k-calendar-monthview .k-calendar-th:nth-child(1),
   .k-calendar-monthview .k-calendar-th:nth-child(7),
   .k-calendar-monthview td:nth-child(1),
   .k-calendar-monthview td:nth-child(7) {
       display: none;
   }

   .k-calendar-monthview .k-calendar-th,
   .k-calendar .k-calendar-monthview td,
   .k-calendar-monthview .k-link {
       width: 46px;
   }
</style>

<TelerikCalendar Min="@min"
                 Max="@max"
                 View="@View"
                 @bind-Date="@theDate" >
</TelerikCalendar>

@code {

    public CalendarView View { get; set; } = CalendarView.Month;

    private DateTime min = new DateTime(2020, 1, 1);

    private DateTime max = new DateTime(2025, 12, 31);

    private DateTime theDate { get; set; } = DateTime.Now;

}
```