NonWorkingTime

Feature that allows styling of weekends (and other non-working time) by adding timeRanges for those days.

Non-working time
//<code-header>
fiddle.title = 'Non-working time';
//</code-header>
const scheduler = new Scheduler({
    appendTo : targetElement,

    // makes scheduler as high as it needs to be to fit rows
    autoHeight : true,

    features : {
        nonWorkingTime : true
    },

    startDate : new Date(2018, 4, 6),
    endDate   : new Date(2018, 4, 13),

    columns : [
        { field : 'name', text : 'Name', width : 100 }
    ],

    resources : [
        { id : 1, name : 'Bernard' },
        { id : 2, name : 'Bianca' }
    ],

    events : [
        { id : 1, resourceId : 1, name : 'Sunday', startDate : '2018-05-07', endDate : '2018-05-08', iconCls : 'fa fa-arrow-left' },
        { id : 2, resourceId : 2, name : 'Saturday', startDate : '2018-05-11', endDate : '2018-05-12', iconCls : 'fa fa-arrow-right' }
    ]
});

By default, the basic Scheduler's calendar is empty. When enabling this feature in the basic Scheduler, it injects Saturday and Sunday weekend intervals if no intervals are encountered. For Scheduler Pro, it visualizes the project calendar and does not automatically inject anything. You have to define a Calendar in the application and assign it to the project, for more information on how to do that, please see Scheduler Pro's Scheduling/Calendars guide.

Please note that to not clutter the view (and have a large negative effect on performance) the feature does not render ranges shorter than the base unit used by the time axis. The behavior can be disabled with hideRangesOnZooming config.

The feature also bails out of rendering ranges for very zoomed out views completely for the same reasons (see maxTimeAxisUnit for details).

Also note that the feature uses virtualized rendering, only the currently visible non-working-time ranges are available in the DOM.

This feature is disabled by default for Scheduler, but enabled by default for Scheduler Pro. For info on enabling it, see GridFeatures.

Configs

18

Common

bodyRendererAbstractTimeRanges
disabledInstancePlugin
enableResizingAbstractTimeRanges
headerRendererAbstractTimeRanges
hoverTooltipAbstractTimeRanges
listenersEvents
showHeaderElementsAbstractTimeRanges
showTooltipAbstractTimeRanges
tooltipTemplateAbstractTimeRanges

Other

hideRangesOnZooming: Boolean= true

The feature by default does not render ranges smaller than the base unit used by the time axis. Set this config to false to disable this behavior.

The maxTimeAxisUnit config defines a zoom level at which to bail out of rendering ranges completely.
maxTimeAxisUnit: DurationUnit= weekNonWorkingTimeMixin

The maximum 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.

catchEventHandlerExceptionsEvents

Misc

bubbleEventsEvents
callOnFunctionsEvents
clientInstancePlugin
localeClassLocalizable
localizableLocalizable
localizablePropertiesLocalizable

Properties

21

Common

disabledInstancePlugin
showHeaderElementsAbstractTimeRanges

Class hierarchy

isNonWorkingTime: Boolean= truereadonly
Identifies an object as an instance of NonWorkingTime class, or subclass thereof.
isNonWorkingTime: Boolean= truereadonlystatic
Identifies an object as an instance of NonWorkingTime class, or subclass thereof.
isNonWorkingTimeMixin: Boolean= truereadonlyNonWorkingTimeMixin
Identifies an object as an instance of NonWorkingTimeMixin class, or subclass thereof.
isNonWorkingTimeMixin: Boolean= truereadonlystaticNonWorkingTimeMixin
Identifies an object as an instance of NonWorkingTimeMixin class, or subclass thereof.
isAbstractTimeRangesAbstractTimeRanges
isDelayableDelayable
isEventsEvents
isInstancePluginInstancePlugin
isLocalizableLocalizable

Lifecycle

configBase
isConstructingBase
isDestroyedBase
isDestroyingBase

Misc

callOnFunctionsEvents
clientInstancePlugin
localeHelperLocalizable
localeManagerLocalizable

Other

catchEventHandlerExceptionsEvents
hoverTooltipAbstractTimeRanges

Functions

31

Other

shouldRenderRange

Based on this method result the feature decides whether the provided non-working period should be rendered or not. The method checks that the range has non-zero duration, lays in the visible timespan and its duration is longer or equal the base timeaxis unit (if hideRangesOnZooming is true).

Override the method to implement your custom range rendering vetoing logic.

ParameterTypeDescription
rangeTimeSpan

Range to render.

Returns: Boolean -

true if the range should be rendered and false otherwise.

addListenerEvents
createOnFrameDelayable
getTipHtmlAbstractTimeRanges
hasListenerEvents
LstaticLocalizable
onEvents
relayAllEvents
removeAllListenersEvents
removeListenerEvents
resumeEventsEvents
suspendEventsEvents
triggerEvents
unEvents

Configuration

applyDefaultsstaticBase

Events

detachListenersBase

Lifecycle

constructBase
constructorBase
destroystaticBase
doDestroyBase
setConfigBase

Misc

animatePropertyBase
callbackBase
doDisableInstancePlugin
downloadTestCaseBase
initClassstaticBase
isOfTypeNamestaticBase
mixinstaticBase
optionalLstaticLocalizable
resolveCallbackBase
updateLocalizationLocalizable

Events

8
beforeDestroyEvents
catchAllEvents
destroyEvents
disableInstancePlugin
enableInstancePlugin
timeRangeHeaderClickAbstractTimeRanges
timeRangeHeaderContextMenuAbstractTimeRanges
timeRangeHeaderDblClickAbstractTimeRanges

Event handlers

8
onBeforeDestroyEvents
onCatchAllEvents
onDestroyEvents
onDisableInstancePlugin
onEnableInstancePlugin
onTimeRangeHeaderClickAbstractTimeRanges
onTimeRangeHeaderContextMenuAbstractTimeRanges
onTimeRangeHeaderDblClickAbstractTimeRanges

Typedefs

2

CSS variables

4
NameDescription
--b-non-working-time-zindexNon-working time z-index
--b-non-working-time-opacityNon-working time opacity
--b-non-working-time-backgroundNon-working time background
--b-non-working-time-header-backgroundNon-working time header background