Hide Weekends in the Calendar

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.

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;

}