TaskNonWorkingTime

Feature highlighting the non-working time intervals for tasks, based on their calendar. If a task 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 Task Calendars Demo.

Task non-working time

//<code-header>
fiddle.title = 'Task non-working time';
//</code-header>
const gantt = new Gantt({
    appendTo : targetElement,

    // makes the Gantt chart as tall as it needs to be to fit all rows
    autoHeight : true,

    columns : [
        { type : 'name', width : 150 },
        { type : 'calendar' }
    ],

    features : {
        taskNonWorkingTime : true
    },

    project : {
        startDate : new Date(2022, 7, 4),

        tasks : [
            { id : 1, name : 'Task 1', calendar : 'mon-thu', duration : 5 },
            { id : 2, name : 'Task 2', calendar : 'break', duration : 5 }
        ],
        calendars : [
            {
                id        : 'general',
                name      : 'General',
                intervals : [
                    {
                        recurrentStartDate : 'on Sat',
                        recurrentEndDate   : 'on Mon',
                        isWorking          : false
                    }
                ]
            },
            {
                id        : 'mon-thu',
                name      : 'Mon-Thu',
                intervals : [
                    {
                        recurrentStartDate : 'on Fri',
                        recurrentEndDate   : 'on Mon',
                        isWorking          : false
                    }
                ]
            },
            {
                id        : 'break',
                name      : 'Breaks',
                intervals : [
                    {
                        startDate : '2022-08-07',
                        endDate   : '2022-08-11',
                        isWorking : false
                    },
                    {
                        startDate : '2022-08-18',
                        endDate   : '2022-08-20',
                        isWorking : false
                    }
                ]
            }
        ]
    }
});

The demo above shows the default row mode, but the feature also supports a bar mode that shades parts of the task bars:

Task non-working time bar

//<code-header>
fiddle.title = 'Task non-working time bar';
//</code-header>
const gantt = new Gantt({
    appendTo : targetElement,

    // makes the Gantt chart as tall as it needs to be to fit all rows
    autoHeight : true,

    columns : [
        { type : 'name', width : 150 },
        { type : 'calendar' }
    ],

    features : {
        taskNonWorkingTime : {
            mode : 'bar'
        }
    },

    project : {
        startDate : new Date(2022, 7, 4),

        tasks : [
            { id : 1, name : 'Task 1', calendar : 'mon-thu', duration : 5 },
            { id : 2, name : 'Task 2', calendar : 'break', duration : 5 }
        ],
        calendars : [
            {
                id        : 'general',
                name      : 'General',
                intervals : [
                    {
                        recurrentStartDate : 'on Sat',
                        recurrentEndDate   : 'on Mon',
                        isWorking          : false
                    }
                ]
            },
            {
                id        : 'mon-thu',
                name      : 'Mon-Thu',
                intervals : [
                    {
                        recurrentStartDate : 'on Fri',
                        recurrentEndDate   : 'on Mon',
                        isWorking          : false
                    }
                ]
            },
            {
                id        : 'break',
                name      : 'Breaks',
                intervals : [
                    {
                        startDate : '2022-08-07',
                        endDate   : '2022-08-11',
                        isWorking : false
                    },
                    {
                        startDate : '2022-08-18',
                        endDate   : '2022-08-20',
                        isWorking : false
                    }
                ]
            }
        ]
    }
});

If you want a tooltip to be displayed when hovering over the non-working time interval, you can configure a tooltipTemplate.

Data structure

Below you see an example of data defining calendars and assigning the tasks a calendar:

const gantt = new Gantt({
    features : {
        taskNonWorkingTime : true
    },

    // A Project holding the data and the calculation engine for the Gantt. It also acts as a CrudManager, allowing
    project   : {
        tasks : [
            { id : 1, name : 'Task 1' },
            { id : 2, name : 'Task 2', calendar : 'break' }
        ],
        calendars : [
            {
                id        : 'general',
                name      : 'General',
                intervals : [
                    {
                        recurrentStartDate : 'on Sat',
                        recurrentEndDate   : 'on Mon',
                        isWorking          : false
                    }
                ]
            },
            {
                id        : 'break',
                name      : 'Breaks',
                intervals : [
                    {
                        startDate : '2022-08-07',
                        endDate   : '2022-08-11',
                        isWorking : false
                    },
                    {
                        startDate : '2022-08-18',
                        endDate   : '2022-08-20',
                        isWorking : false
                    }
                ]
            }
        ]
    }
}):

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.

Configs

Common

disabledInstancePlugin

listenersEvents

Other

maxTimeAxisUnit: String= week

The largest time axis unit to display non working ranges for ('hour' or 'day' etc). When zooming to a view with a larger unit, no non-working time elements will be rendered.

Note: Be careful with setting this config to big units like 'year'. When doing this, make sure the timeline start and end dates are set tightly. When using a long range (for example many years) with non-working time elements rendered per hour, you will end up with millions of elements, impacting performance. When zooming, use the zoomKeepsOriginalTimespan config.

mode: row | bar | bothAlso a property

Rendering mode, one of:

'row' - renders non-working time intervals to the task row
'bar' - renders non-working time intervals inside the task bar
'both - combines 'row' and 'bar' rendering modes

respectFillTicks: BooleanAlso a property

Config that allows rendering to take into account the Gantt fillTicks config:

true - renders non-working time intervals taking into account the Gantt fillTicks config
false - (default) renders non-working time intervals without taking into account the Gantt fillTicks config

tooltipTemplate: function

A template function used to generate contents for a tooltip when hovering non-working time intervals

const gantt = new Gantt({
    features : {
        taskNonWorkingTime : {
            tooltipTemplate({ taskRecord, startDate, endDate }) {
                return 'Non-working time';
            }
        }
    ]
});

Parameter	Type	Description
`data`	Object	Tooltip data
`data.taskRecord`	TaskModel	The taskRecord
`data.startDate`	Date	The start date of the-non working interval
`data.endDate`	Date	The end date of the non-working interval
`data.name`	String	The name of the non-working interval
`data.cls`	String	The cls of the non-working interval
`data.iconCls`	String	The iconCls of the non-working interval

Returns: String | DomConfig | DomConfig[]

catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents

callOnFunctionsEvents

clientInstancePlugin

localeClassLocalizable

localizableLocalizable

localizablePropertiesLocalizable

Properties

Common

disabledInstancePlugin

Class hierarchy

isTaskNonWorkingTime: Boolean= truereadonly

Identifies an object as an instance of TaskNonWorkingTime class, or subclass thereof.

isTaskNonWorkingTime: Boolean= truereadonlystatic

Identifies an object as an instance of TaskNonWorkingTime class, or subclass thereof.

isEventsEvents

isInstancePluginInstancePlugin

isLocalizableLocalizable

Other

mode: row | bar | bothAlso a config

Rendering mode, one of:

'row' - renders non-working time intervals to the task row
'bar' - renders non-working time intervals inside the task bar
'both - combines 'row' and 'bar' rendering modes

respectFillTicks: BooleanAlso a config

Config that allows rendering to take into account the Gantt fillTicks config:

true - renders non-working time intervals taking into account the Gantt fillTicks config
false - (default) renders non-working time intervals without taking into account the Gantt fillTicks config

catchEventHandlerExceptionsEvents

Lifecycle

configBase

isConstructingBase

isDestroyedBase

isDestroyingBase

Misc

callOnFunctionsEvents

clientInstancePlugin

localeHelperLocalizable

localeManagerLocalizable

Functions

destroystaticBase

doDestroyBase

setConfigBase

Misc

animatePropertyBase

callbackBase

doDisableInstancePlugin

downloadTestCaseBase

initClassstaticBase

isOfTypeNamestaticBase

mixinstaticBase

optionalLstaticLocalizable

resolveCallbackBase

updateLocalizationLocalizable

Other

addListenerEvents

hasListenerEvents

LstaticLocalizable

onEvents

relayAllEvents

removeAllListenersEvents

removeListenerEvents

resumeEventsEvents

suspendEventsEvents

triggerEvents

unEvents

Events

taskNonWorkingTimeClick

Triggered when clicking a nonworking time element

// Adding a listener using the "on" method
taskNonWorkingTime.on('taskNonWorkingTimeClick', ({ source, taskRecord, interval, interval.name, interval.startDate, interval.endDate, domEvent }) => {

});

Parameter	Type	Description
`source`	Gantt	The Gantt chart instance
`taskRecord`	TaskModel	Task record
`interval`	Object	The raw data describing the nonworking time interval
`interval.name`	String	The interval name (if any)
`interval.startDate`	Date	The interval start date
`interval.endDate`	Date	The interval end date
`domEvent`	MouseEvent	Browser event

taskNonWorkingTimeContextMenu

Triggered when right-clicking a nonworking time element

// Adding a listener using the "on" method
taskNonWorkingTime.on('taskNonWorkingTimeContextMenu', ({ source, taskRecord, interval, interval.name, interval.startDate, interval.endDate, domEvent }) => {

});

Parameter	Type	Description
`source`	Gantt	The Gantt chart instance
`taskRecord`	TaskModel	Task record
`interval`	Object	The raw data describing the nonworking time interval
`interval.name`	String	The interval name (if any)
`interval.startDate`	Date	The interval start date
`interval.endDate`	Date	The interval end date
`domEvent`	MouseEvent	Browser event

taskNonWorkingTimeDblClick

Triggered when double-clicking a nonworking time element

// Adding a listener using the "on" method
taskNonWorkingTime.on('taskNonWorkingTimeDblClick', ({ source, taskRecord, interval, interval.name, interval.startDate, interval.endDate, domEvent }) => {

});

Parameter	Type	Description
`source`	Gantt	The Gantt chart instance
`taskRecord`	TaskModel	Task record
`interval`	Object	The raw data describing the nonworking time interval
`interval.name`	String	The interval name (if any)
`interval.startDate`	Date	The interval start date
`interval.endDate`	Date	The interval end date
`domEvent`	MouseEvent	Browser event

beforeDestroyEvents

catchAllEvents

destroyEvents

disableInstancePlugin

enableInstancePlugin

Event handlers

onTaskNonWorkingTimeClick

Called when clicking a nonworking time element

new TaskNonWorkingTime({
    onTaskNonWorkingTimeClick({ source, taskRecord, interval, domEvent }) {

    }
});

Parameter	Type	Description
`source`	Gantt	The Gantt chart instance
`taskRecord`	TaskModel	Task record
`interval`	Object	The raw data describing the nonworking time interval
`interval.name`	String	The interval name (if any)
`interval.startDate`	Date	The interval start date
`interval.endDate`	Date	The interval end date
`domEvent`	MouseEvent	Browser event

onTaskNonWorkingTimeContextMenu

Called when right-clicking a nonworking time element

new TaskNonWorkingTime({
    onTaskNonWorkingTimeContextMenu({ source, taskRecord, interval, domEvent }) {

    }
});

Parameter	Type	Description
`source`	Gantt	The Gantt chart instance
`taskRecord`	TaskModel	Task record
`interval`	Object	The raw data describing the nonworking time interval
`interval.name`	String	The interval name (if any)
`interval.startDate`	Date	The interval start date
`interval.endDate`	Date	The interval end date
`domEvent`	MouseEvent	Browser event

onTaskNonWorkingTimeDblClick

Called when double-clicking a nonworking time element

new TaskNonWorkingTime({
    onTaskNonWorkingTimeDblClick({ source, taskRecord, interval, domEvent }) {

    }
});

Parameter	Type	Description
`source`	Gantt	The Gantt chart instance
`taskRecord`	TaskModel	Task record
`interval`	Object	The raw data describing the nonworking time interval
`interval.name`	String	The interval name (if any)
`interval.startDate`	Date	The interval start date
`interval.endDate`	Date	The interval end date
`domEvent`	MouseEvent	Browser event

onBeforeDestroyEvents

onCatchAllEvents

onDestroyEvents

onDisableInstancePlugin

onEnableInstancePlugin

Typedefs

BryntumListenerConfigEvents

CSS variables

Name	Description
`--b-task-non-working-time-z-index`	Task non-working time z index
`--b-task-non-working-time-font-size`	Task non-working time font size
`--b-task-non-working-time-color`	Task non-working time text color
`--b-task-non-working-time-background`	Task non-working time background

TaskNonWorkingTime

Data structure

Styling non-working time interval elements

Configs

Common

Other

Misc

Properties

Common

Class hierarchy

Other

Lifecycle

Misc

Functions

Configuration

Events

Lifecycle

Misc

Other

Events

Event handlers

Typedefs

CSS variables