How to scheduler's week, day describe work time and lunch time and disabled.

1 Answer 175 Views
Scheduler
A RAN
Top achievements
Rank 1
A RAN asked on 02 Sep 2021, 07:45 AM | edited on 02 Sep 2021, 08:44 AM

Hi guys

I develop scheduler's week, day.

for example

sunday is rest day.

and monday ~ saturday is work day.

working hours vary by day of the week.

like this below.

(mon : 10:00~12:00, lunch time: 12:00~13:00, 13:00~17:.00)

(thursday: 10:00~12:00, lunch time: 12:00~13:00, 13:00~18:00)

 

How to describe work time and lunch time?

I want that lunch time 's background color is grey. and event disabled,

and not work time is disabled too.

 

I read week day's min, max date

min date is startTime

max date is endTime.

 

please check and response...

please please..

 

regards,

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 06 Sep 2021, 01:17 PM

Hi,

Regarding setting different business hours for different days in Scheduler I would suggest you review the following Forum threads where a similar issue is discussed:

https://www.telerik.com/forums/how-to-set-business-hours-day-wise

https://www.telerik.com/forums/how-to-assign-the-kendo-ui-scheduler-workdaystart-dynamically

In order to change the background of specific slots, I would suggest you find the needed rows and cells initially and also in the navigate event handler. Then you could change the background color using the jQuery css method. Below is an exmaple:

navigate: function(){
          setTimeout(function(){
             $('.k-scheduler-table tr:nth-child(11)').css('background', 'green')  
             $('.k-scheduler-table tr:nth-child(12)').css('background', 'green')
             $('.k-scheduler-table tr:nth-child(11) td').css('background', 'green')  
             $('.k-scheduler-table tr:nth-child(12) td').css('background', 'green')
          })
        },

To prevent editing of the events during lunch break, you could subscribe to the edit event of the Scheduler. In the event handler, you could check the start and end times of the edited event and prevent default behavior if needed. 

edit: function(e){        		
         if(e.event.start.getHours() >= 13 && e.event.end.getHours() <= 14){
            	   e.preventDefault()
                  alert('Lounch time!')
         }
 },

Here is a Dojo example where this is demonstrated.

Regards,
Neli
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
Scheduler
Asked by
A RAN
Top achievements
Rank 1
Answers by
Neli
Telerik team
Share this question
or