Search code examples
jqueryeventskendo-uikendo-scheduler

How can we change kendo schduler Event end Time?


Recently i'm using kendo scheduler in my project. from there i'm using event adding. By default when we are picking time from scheduler, it will automatically set start time and end time. The difference between start and end time is always 30 min. Example image is given here

According to my requirement i want to change this difference to 1 hour.

I am not able to set this difference. Please help.


Solution

  • I hope i get your point correctly so, this is how you do it.

    1. Use the edit function
    2. I bet you only wanted to do this on new event so i added if isNew
    3. then get the start and end datetimepicker
    4. get the current event startTime and modify it, in this case i added 1 hour
    5. set the widget with the new value
    6. make sure u change the e.event.end since you only change the ui now without actually changing the event time so if you save without touching the "end" datetimepicker the time saved will be correct.

    Here is the edit function code :

    edit: function(e){
        if(e.event.isNew){
            var start = e.container.find("[name=start][data-role=datetimepicker]");
            var end = e.container.find("[name=end][data-role=datetimepicker]"); 
            var startTime = new Date(e.event.start);
            var endTime = new Date(startTime);
                endTime.setHours(startTime.getHours() + 1);
            $(start).data("kendoDateTimePicker").value(startTime); //set start date to the current date and time
            $(end).data("kendoDateTimePicker").value(endTime); //set enddate to the current date and time
    
            //this line needed, since the event time is still only 30 minutes. if you remove this, upon saving if you didnt touch the datetimepicker (leave as it) then it will save only 30 minutes while it showing 1 hour
            e.event.end = endTime;
        }
    

    Here is working example