Completed
Last Updated: 03 Oct 2024 13:24 by ADMIN
Release 2024 Q2 (May)
Created by: Tech
Comments: 0
Category: Calendar
Type: Feature Request
5

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


Unplanned
Last Updated: 07 Aug 2024 16:39 by ADMIN

Redesign the highlighting of the range selection when selecting within an already selected range.

Current behavior:

The first click within an already selected range sets a new start date, and the second click in the selected period sets a new end date. This is ok but there is no highlighting (preview) of the new selection.

Expected behavior:

With the first click within an already selected range start the highlighting (preview) of the new selection.

 

Unplanned
Last Updated: 03 Jun 2024 08:10 by XMedicus
Created by: XMedicus
Comments: 0
Category: Calendar
Type: Bug Report
1

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");
        }
    }
}

Unplanned
Last Updated: 20 May 2024 13:36 by Kristjan
Created by: Kristjan
Comments: 0
Category: Calendar
Type: Feature Request
3
Binding Nullable DateTime to the TelerikCalendar is not currently possible.
Unplanned
Last Updated: 18 Apr 2024 11:31 by Lee
Created by: Lee
Comments: 0
Category: Calendar
Type: Feature Request
1
I want to be able to intercept the selection and cancel it programmatically. 
Unplanned
Last Updated: 10 Apr 2024 12:10 by ADMIN

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>

Declined
Last Updated: 13 Aug 2023 00:56 by Greg

I'm finding it hard to follow what month is what when using multi month views. It would be better if the month appeared above each month view. Where can I put a feature request in for this?

 

Unplanned
Last Updated: 10 Feb 2023 14:45 by Joe

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).

Completed
Last Updated: 24 Nov 2022 09:52 by ADMIN
Created by: Minto
Comments: 4
Category: Calendar
Type: Feature Request
4
There are accessibility violations regarding the inner elements in the table and how rows are associated.
Completed
Last Updated: 12 Oct 2022 07:26 by ADMIN
Release 3.7.0 (09 Nov 2022)
Created by: Uluç
Comments: 1
Category: Calendar
Type: Bug Report
1

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.

Completed
Last Updated: 15 Jun 2022 14:28 by Jo-Anne
Release 3.4.0
Created by: Jo-Anne
Comments: 4
Category: Calendar
Type: Feature Request
6
Is it possible to customize the top html of the Blazor DatePicker Calendar? On the top left, I would prefer 2 rows of 6 small boxes for the user to click on one selecting the month, and on the right a left arrow, then a year textbox defaulting to the current year, then a right arrow with the arrows incrementing.
Completed
Last Updated: 02 Jun 2022 09:19 by ADMIN
Release 3.4.0

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;
        }
    }
}

Unplanned
Last Updated: 17 May 2022 21:17 by Brian Norris
Created by: Kim
Comments: 5
Category: Calendar
Type: Feature Request
5

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.

Unplanned
Last Updated: 14 Oct 2021 11:09 by ADMIN

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

Completed
Last Updated: 28 Jul 2021 20:22 by ADMIN
Release 2.26.0

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.

Unplanned
Last Updated: 07 Jul 2021 10:49 by ADMIN

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;

Completed
Last Updated: 07 Apr 2021 18:16 by ADMIN
Release 2.24.0
Created by: Alireza
Comments: 0
Category: Calendar
Type: Feature Request
2
I would like to use an event similar to the OnCellRender in the Grid. It would allow me to customize the date cells based on some custom business logic.
Completed
Last Updated: 02 Apr 2021 19:43 by ADMIN
Release 2.24.0
Created by: Duane
Comments: 3
Category: Calendar
Type: Feature Request
11

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,