v7.3.0

TimeRangeModel

This class represents a named time range with additional, Calendar-specific fields. It is used by the TimeRanges feature.

This class inherits most of its fields from TimeSpan. The most important of these fields are the following:

It's an indirect subclass of Model. Please refer to documentation of those classes to become familiar with the base interface of this class.

This class defines the following fields:

The data source of any field can be customized in the subclass. Please refer to Model for details.

// Define time range data to load into the Calendar
const calendar = new Calendar({
    features : {
        timeRanges : true
    },
    timeRanges : [
        {
            id        : 1,
            name      : 'Core hours',
            startDate : '2024-01-15 09:00',
            endDate   : '2024-01-15 17:00',
            color     : 'green',
            alignment : 'start',
            footer    : 'Working time'
        }
    ]
});

Useful fields

Field Description
alignment Side of the time range for the header ('start', 'end', null)
color Primary color of the header element
footer Text for the footer area
rotation Direction to rotate header/footer text ('neg', 'pos')

See also

No results

Fields

Fields belong to a Model class and define the Model data structure
  • The events which intersect this time range.

    This property only exists if the this TimeRange has been rendered by the TimeRanges feature

  • color : 'red'/'pink'/'purple'/'violet'/'indigo'+ 12 more

    The primary color of the header element.

  • rotation : 'neg'/'pos'

    The direction to rotate header/footer text.

Properties

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

Source path

Calendar/model/TimeRangeModel.js

Contents