Read Only Calendar

[John]

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?

[Mihaela]

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

[John]

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

[John]

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

 

[Mihaela]

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