This is a migrated thread and some comments may be shown as answers.

Read Only Calendar

4 Answers 137 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 12 Apr 2021, 06:05 PM
I want to use the calendar to display multiple dates that have an event occurrence but I do not want the user to be able to select any dates.  Is there a way to make the calendar read only or disabled?

4 Answers, 1 is accepted

Sort by
0
Mihaela
Telerik team
answered on 15 Apr 2021, 01:53 PM

Hello John,

You could disable the date selection and the month/year navigation with CSS in the 'change' and 'navigate' event handlers of the Kendo UI Calendar.

For example:

@(Html.Kendo().Calendar()
  .Name("calendar")
  .Min(new DateTime(2021, 3, 1))
  .Max(new DateTime(2021, 3, 30))
  .Footer(false)
  .Events(ev =>
    {
       ev.Change("onChange");
       ev.Navigate("onNavigate");
    })
)

<script>
  function onChange(e) {
    var widget = e.sender;
    //disable the header
    widget.wrapper.find(".k-header").toggleClass("k-state-disabled", true).attr("aria-disabled", true);
    //disable the date selection
    widget.wrapper.find('.k-state-selected').removeClass('k-state-selected k-state-focused');
  }

  function onNavigate(e) {
     var widget = e.sender;
     //disable the header
     widget.wrapper.find(".k-header").toggleClass("k-state-disabled", true).attr("aria-disabled", true);
  }
</script>

Another idea is disabling of the dates except these with the event occurrence via the 'DisableDates' property, as it is described in the article below:

https://docs.telerik.com/aspnet-core/html-helpers/scheduling/calendar/disabled-dates

If you have any other questions, feel free to let me know.

 

Regards, Mihaela Lukanova Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
John
Top achievements
Rank 1
answered on 15 Apr 2021, 02:46 PM

I don't want to disable the header because I want the user to be able to navigate months.

onNavigate gets fired when you click on the date in the calendar but that seems to wipe out all the days that are selected via select-dates when the calendar is initialized.

Removing the class 'k-state-selected k-state-focused' also has the affect of wiping out days that are selected via select-dates when the calendar is initialized.

I need a way to prevent the user from clicking on the calendar days.

 

 

 

My calendar control.

<kendo-calendar name="calendarUpcomingInspections" footer=" " selectable="multiple"
    min="new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1)"
    max="new DateTime(DateTime.Now.AddMonths(1).Year, DateTime.Now.AddMonths(1).Month, DateTime.DaysInMonth(DateTime.Now.AddMonths(1).Year, DateTime.Now.AddMonths(1).Month))"
    select-dates="@Model.UpcomingInspectionDates" on-change="onChangeCalendarUpcomingInspections" on-navigate="onNavigateCalendarUpcomingInspections">
</kendo-calendar>

 

Code behind.

 

public DateTime[] UpcomingInspectionDates { get; set; }

 

UpcomingInspectionDates = upcomingInThirtyDays.ToList().Select(x => x.ProjectedInspectionDate.Value).ToArray();

0
John
Top achievements
Rank 1
answered on 15 Apr 2021, 02:49 PM

This seems to do the trick.  Thanks for pointing me in the right direction.

function onNavigateCalendarUpcomingInspections(e) {
    var widget = e.sender;
    widget.wrapper.find(".k-month").toggleClass("k-state-disabled", true).attr("aria-disabled", true);
}

 

0
Mihaela
Telerik team
answered on 16 Apr 2021, 08:07 AM

Hello John,

Thank you for sharing the solution with the community. It is highly appreciated!

If you have any other questions, you are more than welcome to share them.

 

Regards, Mihaela Lukanova Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Calendar
Asked by
John
Top achievements
Rank 1
Answers by
Mihaela
Telerik team
John
Top achievements
Rank 1
Share this question
or