Multiple working hours in same Resource (column)

[Laurin S]

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]

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]

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]

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]

 function onRenderCell(args) {

        if (args.element.classList.contains('e-work-hours') || args.element.classList.contains('e-work-cells')) {

            const groupIndex = parseInt(args.element.getAttribute('data-group-index'), 10);

            // Create an array with the classes 'staff1', 'staff2', 'staff3'

            const staffClasses = ['staff1', 'staff2', 'staff3'];

            // Get the class corresponding to the group index from the staffClasses array

            const selectedClass = staffClasses[groupIndex];

            // Now, update the class of the React component element

            args.element.classList.add(selectedClass);

        }

    }

    function onDataBind() {

        if (scheduleObj.currentView !== "Month" && scheduleObj.currentView !== "Agenda") {

            let currentViewDates = scheduleObj.getCurrentViewDates();

            scheduleObj.resetWorkHours();

            for (var i = 0; i < currentViewDates.length; i++) {

                switch ((currentViewDates[i]).getDay()) {

                    case 1:

                        scheduleObj.setWorkHours([currentViewDates[i]], '09:00', '11:00', 0);//Business Hours: Morning (09:00 AM - 11:00 AM) for 1st resource

                        scheduleObj.setWorkHours([currentViewDates[i]], '15:00', '17:00', 0);//Business Hours: Evening (03:00 PM - 05:00 PM) for 1st resource

                        scheduleObj.setWorkHours([currentViewDates[i]], '09:00', '11:00', 1);

                        scheduleObj.setWorkHours([currentViewDates[i]], '13:00', '15:00', 1);

                        scheduleObj.setWorkHours([currentViewDates[i]], '10:00', '17:00', 2);

                        break;

                    case 2:

                        scheduleObj.setWorkHours([currentViewDates[i]], '09:00', '11:00', 0);

                        scheduleObj.setWorkHours([currentViewDates[i]], '09:00', '11:00', 1);//Business Hours: Morning (09:00 AM - 11:00 AM) for 2nd resource

                        scheduleObj.setWorkHours([currentViewDates[i]], '11:00', '16:00', 1);//Business Hours: Evening (11:00 AM - 16:00 PM) for 2nd resource

                        scheduleObj.setWorkHours([currentViewDates[i]], '09:00', '18:00', 2);

                        break;

                    case 3:

                        scheduleObj.setWorkHours([currentViewDates[i]], '10:00', '13:00', 0);

                        scheduleObj.setWorkHours([currentViewDates[i]], '11:00', '15:00', 1);

                        scheduleObj.setWorkHours([currentViewDates[i]], '10:00', '14:00', 2);//Business Hours: Morning (10:00 AM - 14:00 PM) for 3rd resource

                        scheduleObj.setWorkHours([currentViewDates[i]], '15:00', '17:00', 2);//Business Hours: Morning (15:00 AM - 17:00 PM) for 3rd resource

                        break;

                    case 4:

                        scheduleObj.setWorkHours([currentViewDates[i]], '10:00', '15:00', 0);

                        scheduleObj.setWorkHours([currentViewDates[i]], '09:00', '12:00', 1);

                        scheduleObj.setWorkHours([currentViewDates[i]], '09:00', '13:00', 2);

                        break;

                }

            }

        }

        flag = false;

    }

Regards,
Venkatesh