Kendo ui Calendar - question and potential bug

1 Answer 18 Views
Calendar
Vedad
Top achievements
Rank 3
Bronze
Bronze
Iron
Vedad asked on 08 Jan 2025, 06:43 PM

Hi,

I am trying to set up calendar in my app using range selection mode.
My question would be how can I select range when I open calendar on a button click. (I have field where data is read from db, and then i should preset that data on calendar). 

Second, potential bug:
if Calendar is in range selection mode (selectable="range"), change event doesn't trigger correctly. When first time clicked - value in the widget change event (this.value) equals null, and then when second one is clicked (end of range), this.value equals start of the range. 

https://dojo.telerik.com/TCxOCzUl

I used this dojo.

Thank you very much.

Regards,

Vedad

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 13 Jan 2025, 08:50 AM

Hello Vedad,

Currently, the Calendar does not provide a suitable method for selecting programmatically a range by dates. You can select a range  by selecting cells in the calendar as demonstrated below:

var that = $("#calendar").data('kendoCalendar')
that.rangeSelectable.range($('.k-calendar-td').eq(5), $('.k-calendar-td').eq(15));

Here is a small example where this is demonstrated - https://dojo.telerik.com/QEFawdou.

Regarding the second issue - the value() method returns the selected value in the Calendar when a single selection is performed. As in this scenario having a range method will also be valuable I logged a new Feature Request on your behalf for adding a range method to the component API that will allow the set and get the selected range in the Calendar. Below you will find a link to the item.

https://feedback.telerik.com/kendo-jquery-ui/1675532-add-support-for-range-method-in-calendar 

You could follow the issue in order to be notified once its status is updated.

Regards,
Neli
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Vedad
Top achievements
Rank 3
Bronze
Bronze
Iron
commented on 16 Jan 2025, 01:28 PM | edited

Hi Neli, 

thank you for your answer as always. 

Thanks for the provided dojo, and as it solves visual problem, another problem remains - this selection is based on the array within calendar itself, and position of the dates varies between every month and its even different in the every year. This would mean I should know exact position of first and last day of the month within each calendar to be able to select that. It is kind of inconvenient in this case (i need to set range based on dates without knowing what range will be. 
I am not sure how to do that. For example I have to select 13.01.2025 - 11.02.2025. So that would mean that I should know positions of each of these dates in the calendar, which is not so predictable (or I don't see solution at the moment :) )

As for the event, issue is that after you click first time, your previous selection is put into value. If you open the calendar and select first date, value === null, when you select second date, value === previously selected date.

But anyway, I can live without this for now, since its not urgent that I change to the calendar widget.

Thank you very much and have a nice day.

Regards,

Vedad

Neli
Telerik team
commented on 21 Jan 2025, 09:09 AM

Hi Vedad,

I discussed the issue with a developer from the team and I can confirm that the Calendar provides slectRange method that can be used for selecting a range. Here is such an example: https://dojo.telerik.com/TINZOjHg

The method was missing in the API but after your report we have add it to the documentation.

As a token of gratitude for helping us improving our documentation I have updated your Telerik points.

Let me know in case you have any additional questions on the matter. 

Regards,

Neli

Tags
Calendar
Asked by
Vedad
Top achievements
Rank 3
Bronze
Bronze
Iron
Answers by
Neli
Telerik team
Share this question
or