SchedulerBase

See Keyboard shortcuts for details

Scheduler mode. Supported values: horizontal, vertical

The height in pixels of Scheduler rows.

The date to display when used as a component of a Calendar.

This is required by the Calendar Mode Interface.

Range used to set the length of the time axis when used as a component of a Calendar. Suitable units are 'month', 'week' and 'day'.

This may also be specified as a duration with a magnitude part and a unit part. For example '1m' would mean one month, and '4w' would mean four weeks. See parseDuration for details of syntax.

When using a range of weeks or months, then when this widget's date is synced with its owning Calendar's date property, this widget's startDate is snapped to the closest start point of the range which encompasses that date.

So if using range : '1w', then setting the date to Thursday, 28th October 2021 Would mean that the startDate snaps to Sunday 24th October 2021 (assuming the locale uses Sunday as the week start day).

If not specified, this view moves by its duration in days as derived from its range.

Valid values are:

• day
• week
• month
• year
• decade

This may also be specified as a duration with a magnitude part and a unit part. For example '1m' would mean one month, and '4w' would mean four weeks. See parseDuration for details of syntax.

When using a range of weeks, months, years or decades, then when this widget's date is synced with its owning Calendar's date, this widget's startDate is snapped to the closest start point of the range which encompasses that date.

So if using range : '1w', then setting the date to Thursday, 28th October 2021 Would mean that the startDate snaps to Sunday 24th October 2021 (assuming the locale uses Sunday as the week start day).

If configured to use a range of days, no snapping is done. There's no defined start point so the startDate is set to the incoming Calendar date.

Inline assignments, will be loaded into an internally created AssignmentStore.

The optional AssignmentStore, holding assignments between resources and events. Required for multi assignments.

Inline dependencies, will be loaded into an internally created DependencyStore.

The optional DependencyStore.

Inline events, will be loaded into an internally created EventStore.

The EventStore holding the events to be rendered into the scheduler (required).

Inline resources, will be loaded into an internally created ResourceStore.

The ResourceStore holding the resources to be rendered into the scheduler (required).

Scheduler overrides Grid's default implementation of getRowHeight to pre-calculate row heights based on events in the rows.

The amount of rows that are pre-calculated is limited for performance reasons. The limit is configurable by specifying the preCalculateHeightLimit config.

The results of the calculation are cached internally.

new Scheduler({
    columns : [
        {
            text  : 'Name',
            field : 'name',
            width : 130,
            renderer({ value, record, size }) {
                // Set your desired height here
                size.height = record.parentIndex % 2 === 0 ? 100 : 40;

                return value;
            }
        }
    ]
});

Maximum number of resources for which height is pre-calculated. If you have many events per resource you might want to lower this number to gain some initial rendering performance.

Specify a falsy value to opt out of row height pre-calculation.

By default, when the EventStore (and similar stores) is lazy loading, a loading indicator will be displayed just below the timeline headers. Set this to false to prevent this indicator being shown.

Configure as true to make the scheduler read-only, by disabling any UIs for modifying data.

Note that checks MUST always also be applied at the server side.

"Break points" for which responsive config to use.

Each level can be specified as:

• A number representing the width threshold (e.g., 400)
• The string '*' to match all sizes above other thresholds
• A SchedulerResponsiveLevelConfig object with levelWidth and scheduler properties

See the responsive guide for details and examples.

If set to true this will show a color field in the EventEdit editor and also a picker in the EventMenu. Both enables the user to choose a color which will be applied to the event bar's background. See EventModel's eventColor config. config.

By default, scrolling the schedule will update the timelineContext to reflect the new currently hovered context. When displaying a large number of events on screen at the same time, this will have a slight impact on scrolling performance. In such scenarios, opt out of this behavior by setting this config to false.

Set to true for child nodes in a tree store to inherit their parent´s eventColor

A Menu configuration block which configures the range choosing menu provided which by default selects one of the following:

• day
• week
• month
• year
• decade

This menu is added to the TimeAxisHeaderMenu when the Scheduler is used as a Calendar view.

This may be used to either reconfigure that menu, or, by configuring it as null, could remove the menu entirely if the date range of this view is controlled by other means.

The individual range menu items are under the items property and have the following property names:

• listRangeDayItem
• listRangeWeekItem
• listRangeMonthItem
• listRangeYearItem
• listRangeDecadeItem

These may be reconfigured:

calendar = new Calendar({
    ...
    modes : {
        timeline : {
            type          : 'scheduler',
            range         : 'month',
            listRangeMenu : {
                items : {
                    // We don't want the decade range option
                    listRangeDecadeItem : null
                }
            }
        }
    }
});

Configure UI transitions for various actions in the grid.

Set to false if you don't want to allow events overlapping times for any one resource (defaults to true).

If this config is set, then its gesture property (which defaults to dblclick) creates a new event at the mouse or touch event's time point.

When set to true, the gesture is dblclick, and the new event will have a duration of 1 time axis tick.

This may be specified as the string DOM event name to listen for, such as 'click', 'dblclick' and the new event will have a duration of 1 time axis tick.

The duration of the new event can be set by specifying the duration property as a DurationConfig.

If that is not set, then setting the useEventModelDefaults property will cause the duration to be specified by the default values of the duration and durationUnit fields

Example:

new Scheduler({
    autoCreate : {
        gesture  : 'click',
        duration : '2 hours',
        newName  : 'New appointment'
    }
});

A method allowing you to define date boundaries that will constrain resize, create and drag drop operations. The method will be called with the Resource record, and the Event record.

 new Scheduler({
     getDateConstraints(resourceRecord, eventRecord) {
         // Assuming you have added these extra fields to your own EventModel subclass
         const { minStartDate, maxEndDate } = eventRecord;

         return {
             start : minStartDate,
             end   : maxEndDate
         };
     }
 });

The time axis column config for vertical mode.

Object with VerticalTimeAxisColumn configuration.

This object will be used to configure the vertical time axis column instance.

The config allows configuring the VerticalTimeAxisColumn instance used in vertical mode with any Column options that apply to it.

Example:

new Scheduler({
    mode     : 'vertical',
    features : {
        filterBar : true
    },
    verticalTimeAxisColumn : {
        text  : 'Filter by event name',
        width : 180,
        filterable : {
            // add a filter field to the vertical column access header
            filterField : {
                type        : 'text',
                placeholder : 'Type to search',
                onChange    : ({ value }) => {
                    // filter event by name converting to lowerCase to be equal comparison
                    scheduler.eventStore.filter({
                        filters : event => event.name.toLowerCase().includes(value.toLowerCase()),
                        replace : true
                    });
                }
            }
        }
    },
    ...
});

Get mode (horizontal/vertical)

The date to display when used as a component of a Calendar.

This is required by the Calendar Mode Interface.

If not specified, this view moves by its duration in days as derived from its range.

Valid values are:

• day
• week
• month
• year
• decade

This may also be specified as a duration with a magnitude part and a unit part. For example '1m' would mean one month, and '4w' would mean four weeks. See parseDuration for details of syntax.

When using a range of weeks, months, years or decades, then when this widget's date is synced with its owning Calendar's date, this widget's startDate is snapped to the closest start point of the range which encompasses that date.

So if using range : '1w', then setting the date to Thursday, 28th October 2021 Would mean that the startDate snaps to Sunday 24th October 2021 (assuming the locale uses Sunday as the week start day).

If configured to use a range of days, no snapping is done. There's no defined start point so the startDate is set to the incoming Calendar date.

Get/set assignments, applies to the backing project's AssignmentStore.

Get/set the event store instance of the backing project.

Get/set dependencies, applies to the backing projects DependencyStore.

Get/set the dependencies store instance of the backing project.

Get/set events, applies to the backing project's EventStore.

Get/set the event store instance of the backing project.

Get/set resources, applies to the backing project's ResourceStore.

Get/set the resource store instance of the backing project

By default, when the EventStore (and similar stores) is lazy loading, a loading indicator will be displayed just below the timeline headers. Set this to false to prevent this indicator being shown.

Get/set the scheduler's read-only state. When set to true, any UIs for modifying data are disabled.

By default, scrolling the schedule will update the timelineContext to reflect the new currently hovered context. When displaying a large number of events on screen at the same time, this will have a slight impact on scrolling performance. In such scenarios, opt out of this behavior by setting this config to false.

Gets the count of events within a date range between current startDate and endDate.

Set to true for child nodes in a tree store to inherit their parent´s eventColor

This property yields a Menu configuration block which encapsulates the range choices which this widget may be set to encapsulate:

• day
• week
• month
• year
• decade

By default a list view adds these choices to the header context menu. An agenda view creates a floating settings button which offers this menu. The property may be used to create a custom UI for changing the range. The value yielded by the default get listRangeMenu() implementation looks like this:

{
    items : {
        listRangeDayItem    : {config for DAY range menu item },
        listRangWeekItem    : {config for WEEK range menu item },
        listRangMonthItem   : {config for MONTH range menu item },
        listRangeYearItem   : {config for YEAR range menu item },
        listRangeDecadeItem : {config for DECADE range menu item }
    }
}

A subclass can override get listRangeMenu() and mutate the object returned by the super call.

For example, it could delete properties of the items block to limit which ranges may be selected.

The time range encapsulated by the current date.

When a range is used, changing the date snaps the startDate to the closest starting date of the range. For Example if the range was configured as '1 week' then setting the date to the date of next Wednesday would mean that the startDate would be the start of next week, and an entire week would be encapsulated by this view.

Configure UI transitions for various actions in the grid.

Returns an object defining the range of visible resources

Set to false if you don't want to allow events overlapping times for any one resource (defaults to true).

If this config is set, then its gesture property (which defaults to dblclick) creates a new event at the mouse or touch event's time point.

When set to true, the gesture is dblclick, and the new event will have a duration of 1 time axis tick.

This may be specified as the string DOM event name to listen for, such as 'click', 'dblclick' and the new event will have a duration of 1 time axis tick.

The duration of the new event can be set by specifying the duration property as a DurationConfig.

If that is not set, then setting the useEventModelDefaults property will cause the duration to be specified by the default values of the duration and durationUnit fields

Example:

new Scheduler({
    autoCreate : {
        gesture  : 'click',
        duration : '2 hours',
        newName  : 'New appointment'
    }
});

Interface method used by an encapsulating Calendar view to implement the "next" button.

Interface method used by an encapsulating Calendar view to implement the "prev" button.

Checks if a date range is allocated or not for a given resource.

Returns an array of events for the date range specified by the startDate and endDate options.

By default, for any date, this includes any event which intersects that date.

To only include events that are fully contained within the date range, pass the allowPartial option as false.

By default, any occurrences of recurring events are included in the resulting array (not applicable in Gantt). If that is not required, pass the includeOccurrences option as false.

Example:

 visibleEvents = eventStore.getEvents({
     resourceRecord : myResource,
     startDate      : scheduler.timeAxis.startDate,
     endDate        : scheduler.timeAxis.endDate
 });

Opens an editor UI to edit the passed event, or a config object for a new event.

NOTE: Only available when the EventEdit feature is enabled.

Returns the dependency record for a DOM element

NOTE: Only available when the Dependencies feature is enabled.

Triggers a render of all the cells (in horizontal mode) in and event bars for the passed resource.

Since Scheduler uses virtualized resources, calling this method for a resource that is not currently rendered will not have any effect.

Triggers a render of all the cells (in horizontal mode) and event bars for the passed resources. Leave the argument out to refresh all resources.

Since Scheduler uses virtualized resources, calling this method for resources that are not currently rendered will not have any effect.

Resumes UI refresh on store operations.

Multiple calls to suspendRefresh stack up, and will require an equal number of resumeRefresh calls to actually resume UI refresh.

Specify true as the first param to trigger a refresh if this call unblocked the refresh suspension. If the underlying project is calculating changes, the refresh will be postponed until it is done.

Creates an event on the specified date which conforms to the autoCreate setting for the specified resource. The event is then scrolled into view.

NOTE: If the scheduler is readonly, or resource type is invalid (group header), or if allowOverlap is false and slot is already occupied - no event is created.

This method may be called programmatically by application code if the autoCreate setting is false, in which case the default values for autoCreate will be used.

If the EventEdit feature is active, the new event will be displayed in the event editor.

Called when new event is created. Сan be overridden to supply default record values etc.

Assigns and schedules an unassigned event record (+ adds it to this Scheduler's event store unless already in it).