TimeRanges

Feature that renders global ranges of time in the timeline. Use this feature to visualize a range like a 1 hr lunch or some important point in time (a line, i.e. a range with 0 duration). This feature can also show a current time indicator if you set showCurrentTimeLine to true. To style the rendered elements, use the cls field of the TimeSpan class.

Each time range is represented by an instances of TimeSpan, held in a simple Store. The feature uses timeRangeStore defined on the project by default. The store's persisting/loading is handled by Crud Manager (if it's used by the component).

Note that the feature uses virtualized rendering, only the currently visible ranges are available in the DOM.

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

Showing an icon in the time range header

You can use Font Awesome icons easily (or set any other icon using CSS) by using the iconCls field. The JSON data below will show a flag icon:

{
    "id"        : 5,
    "iconCls"   : "fa fa-flag",
    "name"      : "v5.0",
    "startDate" : "2019-02-07 15:45"
},

Recurring time ranges

The feature supports recurring ranges in case the provided store and models have RecurringTimeSpansMixin and RecurringTimeSpan mixins applied:

// We want to use recurring time ranges, so we make a special model extending standard TimeSpan model with
// RecurringTimeSpan which adds recurrence support
class MyTimeRange extends RecurringTimeSpan(TimeSpan) {}

// Define a new store extending standard Store with RecurringTimeSpansMixin mixin to add recurrence support to the
// store. This store will contain time ranges.
class MyTimeRangeStore extends RecurringTimeSpansMixin(Store) {
    static configurable = {
        // use our new MyResourceTimeRange model
        modelClass : MyTimeRange
    }
};

// Instantiate store for timeRanges using our new classes
const timeRangeStore = new MyTimeRangeStore({
    data : [{
        id             : 1,
        resourceId     : 'r1',
        startDate      : '2019-01-01T11:00',
        endDate        : '2019-01-01T13:00',
        name           : 'Lunch',
        // this time range should repeat every day
        recurrenceRule : 'FREQ=DAILY'
    }]
});

const scheduler = new Scheduler({
    ...
    features : {
        timeRanges : true
    },

    crudManager : {
        // store for "timeRanges" feature
        timeRangeStore
    }
});