CODEWITHSUNDEEP
kendo-scheduler
Gianny
Gianny

Reputation: 1

Kendo UI Scheduler individual business hours

I'm trying to define individual business hours for the kendo scheduler. The kendo scheduler only uses a single start/end time for each work day. I want to define start/end times for each day specifically (ie. monday has different times than tuesday).

Someone recently asked this question on

http://www.telerik.com/forums/set-business-hours-for-individual-days

I'm wondering if someone has extended a view to add similar functionality.

I don't have access to the non-minified version of the views (kendo.ui.DayView, kendo.ui.WeekView). Based on the kendo.scheduler.dayview.min.js file, I'd assume I'd have to extend the DayView, and override the _content function, however I just can't copy the minified version of the function into the extending view.

I'm currently using jQuery to loop through the timeslots to add a css class for this on the data-bound event, however, the performance can be pretty bad if you're on the weekly view and have the major tick set to 5.

The code to loop through the timeslots is similar to http://www.telerik.com/forums/color-code-resource-unavailable-days-hours

dataBound: function (e) {
    var scheduler = this;
    var view = scheduler.view();

    view.table.find("td[role=gridcell]").each(function () {
        var element = $(this);
        var slot = scheduler.slotByElement(element);
        //your custom logic based on the slot object
        if (true) {
            element.addClass("customClass");
        }
    })
}

Upvotes: 0

Views: 3203

Answers (1)

Satya Ranjan Sahoo
Satya Ranjan Sahoo

Reputation: 1086

To define start/end times for each day specifically, use the "schedulerInstance.options" property in "Navigation" method of scheduler.e.g.

 navigate: function (e) {
       var schedulerInstance = $("#schedulerInterface").data('kendoScheduler');
       var options = schedulerInstance.options;  

       switch (new Date().getDay()) 
       {
        case 0:
           options.startTime = // Your start time;
           options.endTime = //Your end time;
           break;
        case 1:
           options.startTime = // Your start time;
           options.endTime = //Your end time;
           break;
        case 2:
           options.startTime = // Your start time;
           options.endTime = //Your end time;
           break;
        case 3:
           options.startTime = // Your start time;
           options.endTime = //Your end time;
           break;
        case 4:
           options.startTime = // Your start time;
           options.endTime = //Your end time;
           break;
        case 5:
           options.startTime = // Your start time;
           options.endTime = //Your end time;
           break;
        case  6:
           options.startTime = // Your start time;
           options.endTime = //Your end time;
           break;
        }                        
    }

Hope it helps.

Upvotes: 3

Related Questions