ResourceNonWorkingTime

Feature that highlights the non-working intervals for resources based on their calendar. If a resource has no calendar defined, the project's calendar will be used. The non-working time interval can also be recurring. You can find a live example showing how to achieve this in the Resource Non-Working Time Demo.

Data structure

Example data defining calendars and assigning the resources a calendar:

{
  "success"   : true,
  "calendars" : {
      "rows" : [
          {
              "id"                       : "day",
              "name"                     : "Day shift",
              "unspecifiedTimeIsWorking" : false,
              "cls"                      : "dayshift",
              "intervals"                : [
                  {
                      "recurrentStartDate" : "at 8:00",
                      "recurrentEndDate"   : "at 17:00",
                      "isWorking"          : true,
                  }
              ]
          }
   ],
   "resources" : {
      "rows" : [
          {
              "id"         : 1,
              "name"       : "George",
              "calendar"   : "day",
              "role"       : "Office",
              "eventColor" : "blue"
          },
          {
              "id"         : 2,
              "name"       : "Rob",
              "calendar"   : "day",
              "role"       : "Office",
              "eventColor" : "blue"
          }
       ]
  [...]

const scheduler = new SchedulerPro({
  // A Project holding the data and the calculation engine for Scheduler Pro. It also acts as a CrudManager, allowing
  // loading data into all stores at once
  project : {
      autoLoad  : true,
      transport : {
          load : {
              url : './data/data.json'
          }
      }
  },
  features : {
      resourceNonWorkingTime : true
  },
  [...]
}):

Styling non-working time interval elements

To style the elements representing the non-working time elements you can set the cls field in your data. This will add a CSS class to all non-working time elements for the calendar. You can also add an iconCls value specifying an icon to display inside the interval.

{
  "success"   : true,
  "calendars" : {
      "rows" : [
          {
              "id"                       : "day",
              "name"                     : "Day shift",
              "unspecifiedTimeIsWorking" : false,
              "cls"                      : "dayshift",
              "intervals"                : [
                  {
                      "recurrentStartDate" : "at 8:00",
                      "recurrentEndDate"   : "at 17:00",
                      "isWorking"          : true
                  }
              ]
          }
      ]
   }
}

You can also add a cls value and an iconCls to individual intervals:

{
  "success"   : true,
  "calendars" : {
      "rows" : [
          {
              "id"                       : "day",
              "name"                     : "Day shift",
              "unspecifiedTimeIsWorking" : true,
              "intervals"                : [
                  {
                     "startDate"          : "2022-03-23T02:00",
                     "endDate"            : "2022-03-23T04:00",
                     "isWorking"          : false,
                     "cls"                : "factoryShutdown",
                     "iconCls"            : "warningIcon"
                 }
              ]
          }
      ]
   }
}

This feature is disabled by default. For info on enabling it, see GridFeatures.