Shows Days from Current Calendar Month Only

Environment

Product	Calendar for Blazor, DatePicker for Blazor, DateRangePicker for Blazor, DateTimePicker for Blazor
Product Version	2.26 +

Description

This knowledge base article answers the following questions:

• How to make the Calendar show only days from the current selected month? In previous releases, the DatePicker showed the current month's days for selection in the Calendar popup. The latest DatePicker shows days from the next and previous months as well. How do I get the picker to display the current month's days only?
• The Calendar should not show days from the "overhang" month. How to disable the display of overflow from the next or previous month?
• How to remove the overview of the next month days in the left side month of the DateRangePicker? Same for the right side month, it shouldn't start with the last days of the previous month.
• How to prevent display and selection of "overlap" days from different months in the DatePicker Calendar?

Solution

Use custom CSS to override the component theme and hide the days from next and previous months in the Calendar month view. There are two options:

• Apply a custom CSS class and target specific Calendar components.
• Use Telerik CSS classes and target all Calendar components.

Hide other month days from all Calendar and Picker instances

.k-calendar .k-other-month {
    visibility: hidden;
}

Target specific Calendar and Picker instances with custom CSS class

.my-custom-calendar-class .k-other-month {
    visibility: hidden;
}

Example

Hide days from other months in the Calendar

<p>
    <label>
        <TelerikCheckBox @bind-Value="@TargetAllCalendars" />
        Target all Calendars (no need for custom CSS class)
    </label>
</p>

<h2>No Days From Other Months</h2>

<TelerikCalendar Class="no-other-month" />

<TelerikCalendar Class="no-other-month" Views="2" />

<TelerikDatePicker @bind-Value="@DateValue"
                   PopupClass="no-other-month"
                   Width="200px" />

<TelerikDateRangePicker @bind-StartValue="@StartDateValue"
                        @bind-EndValue="@EndDateValue"
                        PopupClass="no-other-month" />

<h2>Default Behavior</h2>

<TelerikCalendar />

<TelerikCalendar Views="2" />

<TelerikDatePicker @bind-Value="@DateValue"
                   Width="200px" />

<TelerikDateRangePicker @bind-StartValue="@StartDateValue"
                        @bind-EndValue="@EndDateValue" />

@if (TargetAllCalendars)
{
    <style>
        .k-calendar .k-other-month {
            visibility: hidden;
        }
    </style>
}
else
{
    <style>
        .no-other-month .k-other-month {
            visibility: hidden;
        }
    </style>
}

@code {
    private DateTime DateValue { get; set; } = DateTime.Now;
    private DateTime StartDateValue { get; set; } = DateTime.Now;
    private DateTime EndDateValue { get; set; } = DateTime.Now;

    private bool TargetAllCalendars { get; set; }
}

Notes

The Calendar behavior changed in 2.26 and this is when the component started showing days from the next and previous month by design.

See Also

• Feature request to hide other month days