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;
}
}
}
When a calendar is used in range mode the Today button only sets the start date meaning the user has to then click the end date or its value is unknown.
The end date should be set to something, for me id prefer it to set both the start and end to the current date.
You can see this behaviour on the demo pages by just clicking the today button on the range demo. https://demos.telerik.com/blazor-ui/calendar/selection
Try to use a Calendar (@bind-RangeStart, @bind-RangeEnd) and Date Input (@bind-value) with the same value bound to them. You can't correctly change the date upon input, it shows only today's date.
-------------------- ADMIN EDIT --------------------
The workaround for such a scenario is to not use the @bind-RangeStart, @bind-RangeEnd in Calendar with the same value as Date Input @bind-value. See the code below.
Razor:
<TelerikCalendar Views="1"
View="CalendarView.Month"
SelectionMode="CalendarSelectionMode.Range"
RangeStart="@StartTime"
RangeEnd="@EndTime"
RangeStartChanged="@((DateTime value) => { StartTime = value.Date + value.TimeOfDay; })"
RangeEndChanged="@((DateTime value) => { EndTime = value.Date + value.TimeOfDay; })">
</TelerikCalendar>
<br />
START DATE: @StartTime
<br />
END DATE: @EndTime
<br />
<TelerikDateInput @bind-Value="@inputTimeForStartDate" OnBlur="@OnBlurHandlerFirst" Format="hh:mm">
</TelerikDateInput>
<TelerikDateInput @bind-Value="@inputTimeForEndDate" OnBlur="@OnBlurHandlerSecond" Format="hh:mm">
</TelerikDateInputC#:
DateTime inputTimeForStartDate { get; set; }
DateTime inputTimeForEndDate { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
private void OnBlurHandlerFirst()
{
StartTime += inputTimeForStartDate.TimeOfDay;
}
private void OnBlurHandlerSecond()
{
EndTime += inputTimeForEndDate.TimeOfDay;