Multiple working hours in same Resource (column)

Question

Hi,I would like to ask if there is a possibility to have various working hours for the same resource (column) in the scheduler?Mainly, I'm looking for solutions for the following scenarios:having multiple working hours on the same day (example: Monday, from 10-12am and from 3-5pm)having different workings hours on the different week days (example: Monday from 10-12am, Tuesday from 3-5pm, ...)having working hours only for a certain date period (example: on all Mondays between 01.01 and 31.01 from 10-12am, and on all other Mondays of the year (01.02-31.12) from 3-5pm)Sorry for my complicated needs, but unfortunately they are requested by our customers, who have many part-time collaborators, who are working with very flexible working hours....Thanks.

Hareesh Balasubramanian · Accepted Answer

Hi Laurin, 

Greetings from Syncfusion Support..! 

We have validated your shared queries at our end which can be achieved using the setWorkHours public method of our Scheduler and for that, we have prepared a sample using dataBound and actionComplete events, which can be viewed from the following link. 

Sample: https://stackblitz.com/edit/angular-customized-workhours-sample-for-each-days-te7kg5?file=app.component.ts 
UG link: https://ej2.syncfusion.com/angular/documentation/schedule/how-to/set-different-work-hours/ 
API link: https://ej2.syncfusion.com/angular/documentation/api/schedule/#setworkhours 





  public onDataBound(): void { 
    if (this.islayoutChanged) { 
      var renderedDates = this.scheduleObj.activeView.getRenderDates(); 
      this.scheduleObj.resetWorkHours(); 
      for (var i = 0; i < renderedDates.length; i++) { 
        var dayIndex = renderedDates[i].getDay(); 
        if (dayIndex === 1 || dayIndex === 5) { 
          this.scheduleObj.setWorkHours([renderedDates[i]], '09:00', '12:00'); 
          this.scheduleObj.setWorkHours([renderedDates[i]], '15:00', '18:00'); 
        } else if (dayIndex === 2) { 
          this.scheduleObj.setWorkHours([renderedDates[i]], '11:00', '14:00'); 
        } else if (dayIndex === 4) { 
          this.scheduleObj.setWorkHours([renderedDates[i]], '12:00', '13:00'); 
        } else if (dayIndex == 3) { 
          this.scheduleObj.setWorkHours([renderedDates[i]], '12:00', '19:00'); 
        } 
      } 
      this.islayoutChanged = false; 
    } 
  } 
  public onActionComplete(args: any): void { 
   if ( 
      args.requestType === 'toolBarItemRendered' || 
      args.requestType === 'dateNavigate' || 
      args.requestType === 'viewNavigate' 
    ) { 
      this.islayoutChanged = true; 
    } 
  } 

Kindly try the above solution and get back to us if you need any further assistance. 

We will be happy to assist you..! 

Regards, 
Hareesh

Mahmoud · Answer

How we can set different working hours for different days for each resources? so that user allow booking on these specific time slots

Alice's Schedule

Date: 01-01-2023 --- Business Hours: Morning (09:00 AM - 11:00 AM), Evening (03:00 PM - 05:00 PM)

Date: 02-01-2023 --- Business Hours: Morning (09:00 AM - 11:00 AM)

Venkateshwaran Saravanakumar · Answer

Hi Mahmoud,

Sample: https://stackblitz.com/edit/react-2wztgg-jygnbr?file=index.js

You can set the Multiple work hours on same day for every resource by using the
setWorkHours
method with the help of dataBinding
and renderCell
event, as shown in the below shared snippet.

[index.js]

Regards,
Venkatesh