ResourceTimeRanges
Feature

Feature that draws resource time ranges, shaded areas displayed behind events. These zones are similar to events in that they have a start and end date but different in that they do not take part in the event layout, and they always occupy full row height.

Each time range is represented by an instances of ResourceTimeRangeModel, held in a ResourceTimeRangeStore. Currently they are readonly UI-wise, but can be manipulated on the data level. To style the rendered elements, use the cls field or use the timeRangeColor field.

Data can be provided either using the resourceTimeRanges config on the Scheduler config object:

new Scheduler({
    ...
   features :  {
       resourceTimeRanges : true
   },

   // Data specified directly on the Scheduler instance
   resourceTimeRanges : [
       // Either specify startDate & endDate or startDate & duration when defining a range
       { startDate : new Date(2019,0,1), endDate : new Date(2019,0,3), name : 'Occupied', timeRangeColor : 'red' },
       { startDate : new Date(2019,0,3), duration : 2, durationUnit : 'd', name : 'Available' },
   ]
})

Or the resourceTimeRangeStore config on the Scheduler config object:

new Scheduler({
    ...
    features :  {
        resourceTimeRanges : true
    },
    resourceTimeRangeStore : new ResourceTimeRangeStore({
        readUrl : './resourceTimeRanges/'
    })
})

Or on the project, using the resourceTimeRangesData config.

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

Recurring ranges support

Resource time ranges can also be recurring, as seen in the example below:

const resourceTimeRangeStore = new ResourceTimeRangeStore({
    data : [{
        id             : 1,
        resourceId     : 'r1',
        startDate      : '2019-01-01T11:00',
        endDate        : '2019-01-01T13:00',
        name           : 'Lunch',
        // this time range will repeat every day
        recurrenceRule : 'FREQ=DAILY'
    }]
});

Rendering custom HTML markup

Sometimes it is handy to be able to output custom HTML into the range elements. This can be done using the resourceTimeRangeRenderer config method.

// You can use a custom renderer method to output the contents of the range elements. The return value should
// be a string or a DOMConfig object defining the markup to generate
new Scheduler({
    resourceTimeRangeRenderer{ resourceTimeRangeRecord, resourceRecord, renderData }) {
        if (resourceTimeRangeRecord.important) {
            // Add a CSS class to the range element
            renderData.cls.important = 1;

            return [
                {
                    tag   : 'i',
                    class : 'fa fa-warning'
                },
                {
                    tag  : 'strong',
                    text : resourceTimeRangeRecord.name
                }
            ];
        }
        return resourceTimeRangeRecord.name;
    }
})

Useful configs and functions

Member	Description
resourceTimeRangeRenderer	Custom renderer function for time ranges
resolveResourceTimeRangeRecord	Resolve a record from a DOM element
resourceTimeRangeClick	Fires on time range click
resourceTimeRangeDblClick	Fires on time range double-click
resourceTimeRangeContextMenu	Fires on time range right-click

Configs

Configs are options you supply in a configuration object when creating an instance of this class

enableMouseEvents : Booleanfalse

Set to true to allow mouse interactions with the rendered range elements. By default, the range elements are not reachable with the mouse, and only serve as a static background.

Has a corresponding runtime enableMouseEvents property.
resourceTimeRangeRenderer : Function

ON-OWNER
An empty function by default, but provided so that you can override it. This function is called each time a resource time range is rendered into the schedule. It's called with resourceTimeRangeRecord, resourceRecord, and renderData params.

You should never modify any records inside this method.

By default, the DOM markup of a resource time range bar includes placeholders for 'cls' and 'style'. The cls property is a DomClassList which will be added to the main element. The style property is an inline style declaration for the main element.

IMPORTANT: When returning content, be sure to consider how that content should be encoded to avoid XSS (Cross-Site Scripting) attacks. This is especially important when including user-controlled data such as the event's name. The function encodeHtml as well as xss can be helpful in these cases.
```
resourceTimeRangeRenderer({ resourceTimeRangeRecord, resourceRecord, renderData }) {
    renderData.style = 'color:white'; // You can use inline styles too.

    // Property names with truthy values are added to the resulting elements CSS class.
    renderData.cls.isModified = resourceTimeRangeRecord.isModified;

    // Or, you can treat it as a string, but this is less efficient, especially
    // if your renderer wants to *remove* classes that may be there.
    renderData.cls += ' extra-class';

    return StringHelper.xss`${DateHelper.format(resourceTimeRangeRecord.startDate, 'YYYY-MM-DD')}:
    ${resourceTimeRangeRecord.name}`;
}
```
Parameters
- detail : Object
  
  An object containing the information needed to render a ResourceTimeRangeModel.
- resourceTimeRangeRecord : ResourceTimeRangeModel
  
  The resource time range record.
- resourceRecord : ResourceModel
  
  The resource record.
- renderData : Object
  
  An object containing details about the event rendering.
Returns

String/DomConfig/DomConfig[]
:

A simple string, or a DomConfig object describing the markup
tabIndex : Number0

Specify value to use for the tabIndex attribute of resource time range elements

Properties

Properties are getters/setters or publicly accessible variables on this class

isResourceTimeRanges : Booleantrue

READONLY

static

ADVANCED

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

enableMouseEvents : Booleanfalse

Set to true to allow mouse interactions with the rendered range elements. By default, the range elements are not reachable with the mouse, and only serve as a static background.

Has a corresponding enableMouseEvents config.
isResourceTimeRanges : Booleantrue

READONLY

ADVANCED

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

Functions

Functions are methods available for calling on the class

getElementFromResourceTimeRangeRecord( record )
: HTMLElement

ON-OWNER

Returns the element for the passed resource time range record, if rendered into DOM.
resolveResourceTimeRangeRecord( rangeElement )
: ResourceTimeRangeModel

ON-OWNER

Returns a resource time range record from the passed element

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

resourceTimeRangeClick

ON-OWNER

Triggered for click on a resource time range. Only triggered if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Note that this event is triggered on the owning widget:
resourceTimeRangeContextMenu

ON-OWNER

Triggered for right-click on a resource time range. Only triggered if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Note that this event is triggered on the owning widget:
resourceTimeRangeDblClick

ON-OWNER

Triggered for double-click on a resource time range. Only triggered if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Note that this event is triggered on the owning widget:
resourceTimeRangeMouseDown

ON-OWNER

Triggered for mouse down ona resource time range. Only triggered if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Note that this event is triggered on the owning widget:
resourceTimeRangeMouseOut

ON-OWNER

Triggered for mouse out of a resource time range. Only triggered if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Note that this event is triggered on the owning widget:
resourceTimeRangeMouseOver

ON-OWNER

Triggered for mouse over on a resource time range. Only triggered if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Note that this event is triggered on the owning widget:
resourceTimeRangeMouseUp

ON-OWNER

Triggered for mouse up ona resource time range. Only triggered if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Note that this event is triggered on the owning widget:

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onResourceTimeRangeClick

ON-OWNER

Called for click on a resource time range. Only called if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Note that this handler is called on the owning widget:
onResourceTimeRangeContextMenu

ON-OWNER

Called for right-click on a resource time range. Only called if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Note that this handler is called on the owning widget:
onResourceTimeRangeDblClick

ON-OWNER

Called for double-click on a resource time range. Only called if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Note that this handler is called on the owning widget:
onResourceTimeRangeMouseDown

ON-OWNER

Called for mouse down ona resource time range. Only called if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Note that this handler is called on the owning widget:
onResourceTimeRangeMouseOut

ON-OWNER

Called for mouse out of a resource time range. Only called if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Note that this handler is called on the owning widget:
onResourceTimeRangeMouseOver

ON-OWNER

Called for mouse over on a resource time range. Only called if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Note that this handler is called on the owning widget:
onResourceTimeRangeMouseUp

ON-OWNER

Called for mouse up ona resource time range. Only called if the ResourceTimeRange feature is configured with enableMouseEvents: true.

Note that this handler is called on the owning widget:

id: resourceTimeRanges

Source path

Scheduler/feature/ResourceTimeRanges.js

Demo

examples/resourcetimeranges

ResourceTimeRanges
Feature

Recurring ranges support

Rendering custom HTML markup

Useful configs and functions

See also

Configs

Parameters

Returns

Properties

Functions

Events

Event handlers

Source path

Demo

Inheritance tree4

Mixins2

Contents

ResourceTimeRanges Feature

Recurring ranges support

Rendering custom HTML markup

Useful configs and functions

See also

Configs

Parameters

Returns

Properties

Functions

Events

Event handlers

Source path

Demo

Inheritance tree4

Mixins2

Contents

ResourceTimeRanges
Feature