Set custom working hours issue with setWorkHours

[Andrea]

Hello,

I try to use the setWorkHours function to set custom working hours (on specific date) so I tried the setWorkHours function but it does not work.

Here is my code on stimulus (Rails 7)

import{Controller}from"@hotwired/stimulus"

import{Calendar}from'@syncfusion/ej2-calendars';
import{Schedule,Day,Week,Month,Agenda,TimelineViews,TimelineMonth}from'@syncfusion/ej2-schedule';
import moment from'moment';
Schedule.Inject(Day,Month,Week,Agenda,TimelineViews,TimelineMonth);

exportdefaultclassextendsController{
static targets =['schedule']


connect(){


var workers = JSON.parse(document.querySelector("#schedule").dataset.workers);
var break_events = JSON.parse(document.querySelector("#schedule").dataset.events);


var series_worker =[];
var events_worker =[];


    workers.forEach((worker,j)=>{
      series_worker.push({
            text: worker.firstname, id: j+1, worker_id: worker.id
});
      break_events.filter(event=>event.worker_id == worker.id).forEach((event,i)=>{


var d_start =newDate();
var d_end =newDate();
var hour_start_h =newDate(event.hour_start);
var hour_end_h  =newDate(event.hour_end);
          d_start.setDate(d_start.getDate()- d_start.getDay()+event.day_of_the_week);
          d_start.setHours(hour_start_h.getHours(),hour_start_h.getMinutes(),0);
          d_end.setDate(d_end.getDate()- d_end.getDay()+event.day_of_the_week);
          d_end.setHours(hour_end_h.getHours(),hour_end_h.getMinutes(),0);


          events_worker.push({
Id: i,
Subject:"Pause",
OwnerId: j+1,
StartTime: d_start,
EndTime: d_end,
RecurrenceRule:'FREQ=WEEKLY;INTERVAL=1',
Category:"Pauses",
IsBlock:true
})


});


});


var calendar =newSchedule({
      width:'100%',
      height:'550px',
      views:['Day','Week','Month','TimelineWeek','TimelineMonth','Agenda'],
      firstDayOfWeek :1,
group:{
        byDate:true,
        resources:['Owners']
},
      resources:[{
        field:'OwnerId', title:'Owner',
        name:'Owners', allowMultiple:true,
        dataSource: series_worker,
        textField:'text', idField:'id', colorField:'#000'
}],
//workHours: {highlight: false},
      eventSettings:{ dataSource: events_worker},
      eventRendered:function(args){
if(args.data.Category=='Pauses'){
          args.element.style.background ="#F4F4F4";
          args.element.style.borderColor ="#C3C3C3";
          args.element.style.color ="#000";
}
},






});




    calendar.appendTo(this.scheduleTarget);


    calendar.setWorkHours(newDate(),'11:00','20:00');
}




}

and here is the error I get : 

Besides I would like to set recurring working hours for each day of the week and for different people (OwnerId), so how can I do this ?Thank you

[Ruksar Moosa Sait]

Hi Andrea,

We have validated your reported issue and suggest you to call setworkhours method in the dataBound event like the below code to overcome the issue.

Also, you can set the different working hours (OwnerId) by passing the fourth parameter groupIndex to the setWorkHours event which defines the resource index from the last level.

Note: The groupIndex indices from 0,1 and so on for PROJECT 1,  PROJECT 2,  PROJECT 3.

dataBound: () => {

        scheduleObj.setWorkHours([new
Date(2021, 2, 15)],"10:00","15:00");

     }

Sample: https://stackblitz.com/edit/as3cwt-ag6jba?file=index.js,index.html

Kindly try the above sample and let us know if this meets your requirement.

Regards,

Ruksar Moosa Sait

[Andrea]

Hello,

I put it in dataBinding and it works well now.

Thanks for the help !

Best,
Andrea

[Satheesh Kumar Balasubramanian]

Hi Andrea,

Thanks for the update.

We are happy that your problem has been resolved now.

Regards,

Satheesh Kumar B