Specify work hours for days of week

[Pawel Sadowski]

We need to specify work hours for almost twenty resources for the 180-day date range. Doing it with setWorkHours will require passing thousands of dates. Is it possible to specify work hours for certain days of week for each resource?

We want to define that for example:

Resource A, works on Monday from 10 - 5pm and on Tuesday to Friday from 8 - 4 pm

[Vijay Ravi]

Hi Pawel Sadowski,

You can achieve your requirement using the setWorkHours method of the Schedule. You need to define the day-wise work hours for each resource and set the work hours using the setWorkHours method on the dataBound event of the Schedule as shown in the below code snippet.

Sample: https://stackblitz.com/edit/ej2-js-schedule-multiple-work-hours-resource-basi-gstus4?file=index.js 

[Index.js]

var resourceWorkHours = {

    1: { 1: { start: '10:00', end: '17:00' }, 2: { start: "08:00", end: "16:00" }, 3: { start: '00:00' , end: '00:00' }, 4: { start: '00:00' , end: '00:00' }, 5: { start: '00:00' , end: '00:00' } },

    2: { 1: { start: '00:00' , end: '00:00' }, 2: { start: '00:00' , end: '00:00' }, 3: { start: '07:00', end: '11:00' }, 4: { start: "08:00", end: "12:00" }, 5: { start: '00:00' , end: '00:00' } },

    3: { 1: { start: "06:00", end: "10:00" }, 2: { start: '00:00' , end: '00:00' }, 3: { start: '00:00' , end: '00:00' }, 4: { start: '00:00' , end: '00:00' }, 5: { start: '14:00', end: '16:00' } }

}

 

 

dataBound: () => {

        if (islayoutChanged) {

            var renderedDates = scheduleObj.activeView.getRenderDates();

            scheduleObj.resetWorkHours();

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

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

                if (dayIndex !== 0 && dayIndex !== 6) {

                    // Setting up work hours for resource one

                    scheduleObj.setWorkHours([renderedDates[i]], resourceWorkHours[1][dayIndex].start, resourceWorkHours[1][dayIndex].end, 0);

                    // Setting up work hours for resource two

                    scheduleObj.setWorkHours([renderedDates[i]], resourceWorkHours[2][dayIndex].start, resourceWorkHours[2][dayIndex].end, 1);

                    // Setting up work hours for resource three

                    scheduleObj.setWorkHours([renderedDates[i]], resourceWorkHours[3][dayIndex].start, resourceWorkHours[3][dayIndex].end, 2);

 

                }

            }

        }

    },

Regards,

Vijay Ravi

[Pawel Sadowski]

Thank you. The solution works but now I have related problem on the timeline view. Removing resource which timeline is visible in the middle of other resource timelines causes that the working hours of removed resource are applied to the resource which takes its place on the view:

 The same situation happens when resource is added to the view and takes place in order of another resource - it gets working hours of resource which previously has that place in order: 

Resources are added/removed by addResource/removeResource methods. 

[Swathi Ravi]

Hi Pawel,

You can resolve your reported issue by using the code snippets provided below. When you delete the resources, you also remove the work hours from the array.

Sample: https://stackblitz.com/edit/ej2-js-schedule-multiple-work-hours-resource-basi-aam5v5?file=index.js

[index.js]

var resourceWorkHours = [

  {

    1: { start: '10:00', end: '17:00' },

    2: { start: '08:00', end: '16:00' },

    3: { start: '00:00', end: '00:00' },

    4: { start: '00:00', end: '00:00' },

    5: { start: '00:00', end: '00:00' },

  },

  {

    1: { start: '00:00', end: '00:00' },

    2: { start: '00:00', end: '00:00' },

    3: { start: '07:00', end: '11:00' },

    4: { start: '08:00', end: '12:00' },

    5: { start: '00:00', end: '00:00' },

  },

  {

    1: { start: '06:00', end: '10:00' },

    2: { start: '00:00', end: '00:00' },

    3: { start: '00:00', end: '00:00' },

    4: { start: '00:00', end: '00:00' },

    5: { start: '14:00', end: '16:00' },

  },

];

var islayoutChanged = false;

dataBound: () => {

    console.log('dataBound Called');

    if (islayoutChanged) {

      var renderedDates = scheduleObj.activeView.getRenderDates();

      scheduleObj.resetWorkHours();

      var resourceDataSource =

        scheduleObj.getResourceCollections()[0].dataSource;

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

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

        if (dayIndex !== 0 && dayIndex !== 6) {

          for (var j = 1; j <= resourceDataSource.length; j++) {

            scheduleObj.setWorkHours(

              [renderedDates[i]],

              resourceWorkHours[j - 1][dayIndex].start,

              resourceWorkHours[j - 1][dayIndex].end,

              scheduleObj.getIndexFromResourceId(j) != -1 ? scheduleObj.getIndexFromResourceId(j) : scheduleObj.getIndexFromResourceId(j + 1)

            );

          }

        }

      }

    }

  },

let removedElement;

function setWorkHourss() { }

var buttonObj = new ej.buttons.Button();

buttonObj.appendTo('#remove-res');

buttonObj.element.onclick = function () {

  islayoutChanged = true;

  scheduleObj.removeResource(2, 'Doctors');

  removedElement = resourceWorkHours.splice(1, 1);

};

 

var buttonObj = new ej.buttons.Button();

buttonObj.appendTo('#add-res');

buttonObj.element.onclick = function () {

  islayoutChanged = true;

  const insertionIndex = 1; // Specify the desired index for insertion

  scheduleObj.addResource(scheduleObj.resources[0].dataSource[1], 'Doctors', insertionIndex);   // Add the removed resources back to the array at a specific index.

  resourceWorkHours.splice(insertionIndex, 0, removedElement[0]);  // Add the removed element back to the array at a specific index.

};

Regards,

Swathi Ravi