Multiple resource work hours

[Jon]

Hi - is it at all possible on the Schedule control to have multiple resource working hours, e.g.:

Resource A works Mondays 06:00 - 10:00 and 17:00-20:00

From the docs and other examples on the forum (e.g. https://www.syncfusion.com/forums/151738/holiday-and-resources-time-shift) it seems to be only able to cater for different work days/hours per resource but not multiple times per resource. It felt do-able using cellTemplate/renderCell but wasn't sure how well this would scale if I was to have a heavy multiple resource view

[Ravikumar Venkatesan]

Hi Jon, 

Greetings from Syncfusion support. 

We have validated your reported query “Is it possible on the Schedule control to have multiple resource working hours” at our end. We have achieved your requirement with the help of the below code in the dataBound event and setWorkHours public method of the Schedule. We have prepared a sample for your reference and it can be available below. 

[App.vue] 

<template> 

  <div> 

    <div class="col-md-12 control-section"> 

      <div class="content-wrapper"> 

        <ejs-schedule id="Schedule" ref="scheduleObj" height="650px" :eventSettings="eventSettings" currentView="Week" :group="group" :actionComplete="onActionComplete" :dataBound="onDataBound"> 

          <e-views> 

            <e-view option="Day"></e-view> 

            <e-view option="Week"></e-view> 

          </e-views> 

          <e-resources> 

            <e-resource field="RoomId" title="Room" name="Rooms" :dataSource="roomDataSource" textField="RoomText" idField="Id" colorField="RoomColor"></e-resource> 

            <e-resource field="OwnerId" title="Owner" name="Owners" :allowMultiple="allowMultiple" :dataSource="ownerDataSource" textField="OwnerText" idField="Id" groupIDField="OwnerGroupId" colorField="OwnerColor"></e-resource> 

          </e-resources> 

        </ejs-schedule> 

      </div> 

    </div> 

  </div> 

</template> 

 

<script> 

import Vue from "vue"; 

import { extend } from "@syncfusion/ej2-base"; 

import { SchedulePlugin, Day, Week, Resize, DragAndDrop } from "@syncfusion/ej2-vue-schedule"; 

 

Vue.use(SchedulePlugin); 

 

let resourceOne = [ 

  {startHour1: "00:00",endHour1: "00:00",startHour2: "00:00",endHour2: "00:00"}, // for Sunday 

  {startHour1: "06:00",endHour1: "10:00",startHour2: "17:00",endHour2: "20:00"}, // for Monday 

  {startHour1: "07:00",endHour1: "11:00",startHour2: "18:00",endHour2: "21:00"}, // for Tuesday 

  {startHour1: "08:00",endHour1: "12:00",startHour2: "19:00",endHour2: "22:00"}, // for Wednesday 

  {startHour1: "07:00",endHour1: "11:00",startHour2: "18:00",endHour2: "21:00"}, // for Thursday 

  {startHour1: "06:00",endHour1: "10:00",startHour2: "17:00",endHour2: "20:00"}, // for Friday 

  {startHour1: "00:00",endHour1: "00:00",startHour2: "00:00",endHour2: "00:00"} // for Saturday 

]; 

let resourceTwo = [ 

  {startHour1: "00:00",endHour1: "00:00",startHour2: "00:00",endHour2: "00:00"}, // for Sunday 

  {startHour1: "05:00",endHour1: "09:00",startHour2: "16:00",endHour2: "19:00"}, // for Monday 

  {startHour1: "06:00",endHour1: "10:00",startHour2: "17:00",endHour2: "20:00"}, // for Tuesday 

  {startHour1: "07:00",endHour1: "11:00",startHour2: "18:00",endHour2: "21:00"}, // for Wednesday 

  {startHour1: "06:00",endHour1: "10:00",startHour2: "17:00",endHour2: "20:00"}, // for Thursday 

  {startHour1: "08:00",endHour1: "12:00",startHour2: "19:00",endHour2: "22:00"}, // for Friday 

  {startHour1: "00:00",endHour1: "00:00",startHour2: "00:00",endHour2: "00:00"} // for Saturday 

]; 

let resourceThree = [ 

  {startHour1: "00:00",endHour1: "00:00",startHour2: "00:00",endHour2: "00:00"}, // for Sunday 

  {startHour1: "04:00",endHour1: "08:00",startHour2: "15:00",endHour2: "18:00"}, // for Monday 

  {startHour1: "05:00",endHour1: "09:00",startHour2: "16:00",endHour2: "19:00"}, // for Tuesday 

  {startHour1: "06:00",endHour1: "10:00",startHour2: "17:00",endHour2: "20:00"}, // for Wednesday 

  {startHour1: "07:00",endHour1: "11:00",startHour2: "18:00",endHour2: "21:00"}, // for Thursday 

  {startHour1: "08:00",endHour1: "12:00",startHour2: "19:00",endHour2: "22:00"}, // for Friday 

  {startHour1: "00:00",endHour1: "00:00",startHour2: "00:00",endHour2: "00:00"} // for Saturday 

]; 

let isLayoutChanged = false; 

 

export default Vue.extend({ 

  data: function() { 

    return { 

      group: { 

        resources: ["Rooms", "Owners"] 

      }, 

      roomDataSource: [ 

        { RoomText: "ROOM 1", Id: 1, RoomColor: "#cb6bb2" }, 

        { RoomText: "ROOM 2", Id: 2, RoomColor: "#56ca85" } 

      ], 

      allowMultiple: true, 

      ownerDataSource: [ 

        { OwnerText: "Nancy", Id: 1, OwnerGroupId: 1, OwnerColor: "#ffaa00" }, 

        { OwnerText: "Steven", Id: 2, OwnerGroupId: 2, OwnerColor: "#f8a398" }, 

        { OwnerText: "Michael", Id: 3, OwnerGroupId: 1, OwnerColor: "#7499e1" } 

      ], 

      eventSettings: { dataSource: extend([], data, null, true) } 

    }; 

  }, 

  provide: { 

    schedule: [Day, Week, Resize, DragAndDrop] 

  }, 

  methods: { 

    onDataBound(args) { 

      if (isLayoutChanged) { 

        let scheduleObj = this.$refs.scheduleObj.ej2Instances; 

        let renderedDates = scheduleObj.activeView.getRenderDates(); 

        scheduleObj.resetWorkHours(); 

        for (let i = 0; i < renderedDates.length; i++) { 

          let dayIndex = renderedDates[i].getDay(); 

          if ([0, 6].indexOf(dayIndex) < 0) { 

            scheduleObj.setWorkHours([renderedDates[i]],resourceOne[dayIndex].startHour1,resourceOne[dayIndex].endHour1,0); 

            scheduleObj.setWorkHours([renderedDates[i]],resourceOne[dayIndex].startHour2,resourceOne[dayIndex].endHour2,0); 

            scheduleObj.setWorkHours([renderedDates[i]],resourceTwo[dayIndex].startHour1,resourceTwo[dayIndex].endHour1,1); 

            scheduleObj.setWorkHours([renderedDates[i]],resourceTwo[dayIndex].startHour2,resourceTwo[dayIndex].endHour2,1); 

            scheduleObj.setWorkHours([renderedDates[i]],resourceThree[dayIndex].startHour1,resourceThree[dayIndex].endHour1,2); 

            scheduleObj.setWorkHours([renderedDates[i]],resourceThree[dayIndex].startHour2,resourceThree[dayIndex].endHour2,2); 

          } 

        } 

      } 

    }, 

    onActionComplete(args) { 

      if (args.requestType === "toolBarItemRendered" || args.requestType === "dateNavigate" || args.requestType === "viewNavigate") { 

        isLayoutChanged = true; 

      } 

    } 

  } 

}); 

</script> 

 

 

Sample: https://codesandbox.io/s/ej2-vue-schedule-setting-multiple-work-hours-for-individual-day-of-the-each-resources-g0nrr 

Kindly try the above sample and get back to us if you need any further assistance. 

API (dataBound event): https://ej2.syncfusion.com/vue/documentation/api/schedule/#databound 

API (setWorkHours method): https://ej2.syncfusion.com/vue/documentation/api/schedule/#setworkhours 

API (resetWorkHours method): https://ej2.syncfusion.com/vue/documentation/api/schedule/#resetworkhours 

Regards, 

Ravikumar Venkatesan 

[Jon]

Perfect thank you - I think that is exactly what I'm after.

I didn't even think about calling setWorkHours multiple times figured it would override that makes perfect sense and probably simplifies my problem.

Thanks

[Vengatesh Maniraj]

Hi Jon, 

Thanks for the update. 

We are happy that our solution has simplified your problem. 

Regards, 

Vengatesh