Provide a way to customize whether the other month dates should be visible in the popup.
ADMIT EDIT: This feature request applies to the Calendar, DatePicker, DateRangePicker and DateTimePicker.
Knowledge base article with a CSS workaround - Hide days from other Calendar months
In the Calendar documentation, it says that we can selected multiple dates either by holding Shift to select a range or holding control to select multiple individual dates.
Expected behavior (Windows & Mac):
* Shift - Range Select
* Control - Individual Multiple Selection
Result (Windows):
* Shift - ✓
* Control - ✓
Result (Mac):
* Shift - ✓
* Control - ✖
Explanation:
On Mac holding control and selecting a date toggles a right-click (displays options menu), I cannot seem to be able to select more than one date with holding control down.
For example, if you want to prevent the user from selecting all dates prior to February 2021 you can set the Min parameter to new DateTime(2021, 2, 1). In this case, if you navigate to 2022 and then try to navigate back to 2021 through the Decade view, it is not possible, you can only select future year.
Pressing the Today button works as expected.
===========
ADMIN EDIT
===========
Meanwhile, if you want to disable all past dates, a workaround you may try is handle the OnCellRender event of the Calendar and add a CSS class to the cells to style them as disabled. The sample below demonstrates how to achieve that.
<style>
.not-allowed-cell {
pointer-events: none;
cursor: not-allowed;
background-color: whitesmoke;
opacity: 0.6;
}
</style>
<TelerikCalendar @bind-Date="aDate" OnCellRender="RenderCell"></TelerikCalendar>
@code{
DateTime aDate { get; set; } = DateTime.Now;
void RenderCell(CalendarCellRenderEventArgs args)
{
switch (args.View)
{
case CalendarView.Month:
if (args.Date < DateTime.Today)
{
args.Class = "not-allowed-cell";
}
break;
case CalendarView.Year:
if (args.Date.Month < DateTime.Today.Month && args.Date.Year == DateTime.Today.Year)
{
args.Class = "not-allowed-cell";
}
break;
case CalendarView.Decade:
if (args.Date.Year < DateTime.Today.Year)
{
args.Class = "not-allowed-cell";
}
break;
case CalendarView.Century:
if (DateTime.Today.Year - args.Date.Year >= 10)
{
args.Class = "not-allowed-cell";
}
break;
default:
break;
}
}
}
The calendar viewshows one row too much if the month only has 5 weeks. Please check the attached screenshots.
Steps to reproduce this behaviour:
Just use a regular calendar control and check a month that has 5 weeks only.
E.g. December 2019 if a culture with a week start of Sunday is selected or November 2019 if a culture with a week start of Monday is selected.
Basically want to do the same thing as on the following two demo pages:
Kendo UI already has this feature:
https://demos.telerik.com/kendo-ui/calendar/template
DevExpress UI for Blazor already has this feature:
https://demos.devexpress.com/blazor/Calendar#DayCellCustomization
Checked the documents but this doesn't seem supported yet, is that the case / is this something we could get implemented if so?
Many thanks,