How to hide hours in month view of kendo UI Scheduler

This post helps you to know how to hide hours (timings) and show business hours button in month view of Kendo UI Scheduler.

In one of my project our client wants that in month view he only sees list of event and he is not interested to see them in hourly manner as for him all events are all day event. So while implementing that requirement I found this solution by which you can hide all those hours without any jQuery code.

To hide hours in month view (refer above image) of Kendo UI Scheduler we can use configuration attribute called “MinorTickCount” which we can set while defining view. Though it is not a proper way but for most of the scenarios it can save your time.

To hide hours you need to set this attribute value to 0(Zero) like following.

views.DayView(d => MinorTickCount(0));

For more information about this configuration attribute you can check telerik docs here . In docs “MinorTickCount” attribute has description as “The number of time slots to display per major tick”

“Show Business Hours”  button comes in footer of the day view like below.

To hide this “Show Business Hours” button together with hours you can set footer to false like below.

.Views(views =>
{

views.DayView(d => d.Footer(false).ShowWorkHours(false).MinorTickCount(0));

})

You can achieve the same effect by using jQuery & css code like below.

To make event’s width to 100 percent

.k-scheduler-dayview .k-event
{
        width: 100% !important;
}

And to hide hours add following code in DataBound event of Kendo Scheduler.

if (e.sender.view().name.toLowerCase() == "day") {

            $('.k-scheduler-times').hide();

            $('.k-scheduler-dayview .k-scheduler-content .k-scheduler-table').hide();

 }

Hope above code will save some of your time. Let me know if you know better way than this and also share kendo related your findings in comment section or by mail to help developers like us. Thanks.