I am working on adding keyboard navigation to my webpage and have encountered an issue with the Telerik Blazor Calendar. While it is possible to navigate to and through the Calendar using the tab key and arrow keys, it is not possible to tab out of the calendar once the days is in focus.

===

A possible workaround is to tab out with JavaScript. The example below uses a hard-coded element to focus. It is also possible to find an unknown focusable element after the Calendar.

@inject IJSRuntime js

<script suppress-error="BL9992">
    function focusOutCalendar() {
        var focusedCalendarCell = document.querySelector(".calendar-container td.k-focus");
        if (focusedCalendarCell) {
            document.getElementById("input-after-calendar").focus();
        }
    }
</script>

<div @onkeydown="@OnCalendarKeyDown" class="calendar-container">
    <TelerikCalendar />
</div>

<input id="input-after-calendar" style="width:20em" value="focusable element after the Calendar" />

@code {
    private async Task OnCalendarKeyDown(KeyboardEventArgs args)
    {
        if (args.Key == "Tab")
        {
            await js.InvokeVoidAsync("focusOutCalendar");
        }
    }
}

I would like to be able to specify the week starting day when setting up the Telerik Calendar component.

Such as:

<TelerikCalendar FirstDayOfWeek=@DayOfWeek.Tuesday>
</TelerikCalendar>

Currently, I'm using your Calendar component for a vacation request feature. It works decently for picking dates in that I can use CTRL and Shift to select many dates. I'm currently making the page responsive but the mobile user experience lacks because there is no way to select more than one date.

The ideal user experience would be to be able to single click (or tap from mobile) to select a date and be able to do that on as many dates as preferred (to select many). Clicking/tapping again would deselect the date. That would be better in both the desktop and mobile versions and more intuitive for a user (as no one has initially assumed CTRL and Shift work - I have had to train them).

Hi,

I try to implement a calendar there i use Range selection mode. I want the user only to click on the start range and then we will set end range in code based on the start range date. 

So i have set an RangeStartChanged event handler and that works but the gui component think i am in select end Range date so i want to exit the selection state after i have select Start date.

Is there anyway to do that?

---

ADMIN EDIT

---

A possible workaround for the time being - use Multiple selection mode of the Calendar and simulate Range selection. Handle ValueChanged event, programmatically add the desired count of dates to the selection and style them as range: https://blazorrepl.telerik.com/cQuzvKbO29J2Tbnt04.

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

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">
</TelerikDateInput

C#:

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;