Completed
Last Updated: 04 Jun 2024 06:11 by ADMIN
Michael D
Created on: 29 Jan 2024 14:48
Category: Calendar
Type: Bug Report
1
Calendar - currently selected date is not highlighted when viewing a different month

In the month view, the Kendo-UI Calendar widget displays the days of the next or previous month to fill the remaining space in a week. When a date is selected, it is highlighted.

Imagine the following scenario:

  • You select the first day of any month.
  • You view the month before the one with the selected day in the month-view. As long asthe last day of this month is not a Sunday, you should also see an entry for the date you selected before.
  • However, the currently selected date is not highlighted.

This can easily be repoduced with the demo calendar.

4 comments
ADMIN
Neli
Posted on: 04 Jun 2024 06:11

Hi Michael,

I am writing you just to let you know that with the latest Kendo version - 2024.2.514 (2024 Q2) - the Calendar has been improved. With the latest version, the currently selected date will be highlighted if it is visible even when scrolling to the next or the previous month. You can test the current behavior in our demos - https://demos.telerik.com/kendo-ui/calendar/index.

With the above said, I am changing the status of the issue to 'Completed'.

We remain at your disposal in case you have any additional questions.

Regards,
Neli
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
ADMIN
Neli
Posted on: 21 Feb 2024 13:29

Hi Michael,

Thank you for the additional details provided.

Currently, the selected date will be highlighted and the background will be changed only when the respective month is selected in the same month is displayed in the view. We are reviewing the UX of the Calendar and I have forwarded your report to the team. I will mark the thread with the 'Under review' tag until the UX team reviews the discussed scenario. 

In the meantime, you can achieve the desired behavior by saving the selected date in a variable in the change event handler. Then, when the user navigates to a different view you can find the date and add to it a custom class. Next, you can use the custom class to style the date. Below is an example:

 var selected = ''
          $("#calendar").kendoCalendar({
            change: function(e){
              $('.custom').removeClass('custom')             
              selected = $('.k-selected .k-link').attr('data-value')
            },
            navigate: function(e){
             
              if(selected != ''){
                var current = $('[data-value="'+selected+'"]')                
                current.parent().addClass('custom')
              }
            }
          });
        });

The above is demonstrated in the Dojo linked here.

As a token of gratitude for reporting the issue I have updated your Telerik points.

Regards,
Neli
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Michael D
Posted on: 14 Feb 2024 15:21

Hi!

The highlight you see is the current focused date. It always stays at the same day of the month. However, I would expect the currently selected to be marked.

  • Select Feburary 1st
  • Switch to January - The cell marked in red should be selected.

Sorry for the confusion.

ADMIN
Neli
Posted on: 05 Feb 2024 07:29

Hi Michael,

I tried to replicate the issue, but on my end, the selected date seems highlighted. I tried to select a date and then navigate to a different month than the current one. Please take a look at the screencast linked here and let me know if I am missing something - https://somup.com/cZnhiOph9q.

Looking forward to your reply

Regards,
Neli
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources