TimelineBase

Decimal precision used when displaying durations, used by tooltips and DurationColumn. Specify false to use raw value

The end date of the timeline (if not configure with infiniteScroll).

If omitted, it will be calculated based on the startDate setting and the 'defaultSpan' property of the current viewPreset.

If a string is supplied, it will be parsed using DateHelper.defaultFormat.

Note: If you need to set start and end date at the same time, use the setTimeSpan method.

Get/set end date limit of the timeline. Actions such as timeline scrolling, all types of timeline zooms and shifts will respect this limit.

Get/set start date limit of the timeline. Actions such as timeline scrolling, all types of timeline zooms and shifts will respect this limit.

The start date of the timeline (if not configure with infiniteScroll).

If omitted, and a TimeAxis has been set, the start date of the provided TimeAxis will be used. If no TimeAxis has been configured, it'll use the start/end dates of the loaded event dataset. If no date information exists in the event data set, it defaults to the current date and time.

If a string is supplied, it will be parsed using DateHelper.defaultFormat.

When using infiniteScroll, use visibleDate to control initially visible date instead.

Note: If you need to set start and end date at the same time, use the setTimeSpan method.

A date to bring into view initially on the scrollable timeline.

This may be configured as either a Date or a scrolling options object describing the scroll action, including a date option which references a Date.

See scrollToDate for details about scrolling options.

Note that if a naked Date is passed, it will be stored internally as a scrolling options object using the following defaults:

{
    date  : <The Date object>,
    block : 'nearest'
}

This moves the date into view by the shortest scroll, so that it just appears at an edge.

To bring your date of interest to the center of the viewport, configure your Scheduler thus:

    visibleDate : {
        date  : new Date(2023, 5, 17, 12),
        block : 'center'
    }

Region to which columns are added when they have none specified

By default the row hover effect is not visible in the Scheduler part of the grid.

Set this to false to show the hover effect in Scheduler rows.

Set to a time zone or a UTC offset. This will set the projects timeZone config accordingly. As this config is only a referer, please see project's config documentation for more information.

new Calendar(){
  timeZone : 'America/Chicago'
}

Set to false if you don't want event bar DOM updates to animate.

Affects drag drop and resizing of events when snap is enabled.

If set to true, dates will be snapped relative to event start. e.g. for a zoom level with timeResolution = { unit: "s", increment: "20" }, an event that starts at 10:00:03 and is dragged would snap its start date to 10:00:23, 10:00:43 etc.

When set to false, dates will be snapped relative to the timeAxis startDate (tick start)

• 10:00:03 -> 10:00:20, 10:00:40 etc.

You can set this option to false to make the timeline panel start and end on the exact provided startDate/endDate w/o adjusting them.

Set to true to force the time columns to fit to the available space (horizontal or vertical depends on mode). Note that setting suppressFit to true, will disable forceFit functionality. Zooming cannot be used when forceFit is set.

Partners this Timeline panel with another Timeline in order to sync their region sizes (sub-grids like locked, normal will get the same width), start and end dates, view preset, zoom level and scrolling position. All these values will be synced with the timeline defined as the partner.

Can be specified as:

• A Timeline instance reference

• A string selector: widget type (e.g. 'gantt'), id selector (e.g. '#myGantt'), or attribute selector (e.g. '[ref=myGantt]')

• To add a new partner dynamically see addPartner method.

• To remove existing partner see removePartner method.

• To check if timelines are partners see isPartneredWith method.

Column widths and hide/show state are synced between partnered schedulers when the column set is identical.

When set, the text in the major time axis header sticks in the scrolling viewport as long as possible.

Set to true to prevent auto calculating of a minimal tickSize to always fit the content to the screen size. Setting this property on true will disable forceFit behaviour.

A TimeAxis config object or instance, used to create a backing data store of 'ticks' providing the input date data for the time axis of timeline panel. Created automatically if none supplied.

A valid JS day index between 0-6 (0: Sunday, 1: Monday etc.) to be considered the start day of the week. When omitted, the week start day is retrieved from the active locale class.

An object with format { fromDay, toDay, fromHour, toHour } that describes the working days and hours. This object will be used to populate TimeAxis include property.

Using it results in a non-continuous time axis. Any ticks not covered by the working days and hours will be excluded. Events within larger ticks (for example if using week as the unit for ticks) will be stretched to fill the gap otherwise left by the non-working hours.

As with end dates, toDay and toHour are exclusive. Thus toDay : 6 means that day 6 (saturday) will not be included.

NOTE: When this feature is enabled Zooming feature is not supported. It's recommended to disable zooming controls:

new Scheduler({
    zoomOnMouseWheel          : false,
    zoomOnTimeAxisDoubleClick : false,
    ...
});

Get/set endDate. Defaults to startDate + default span of the used ViewPreset.

Note: If you need to set start and end date at the same time, use setTimeSpan method.

Get/set end date limit of the timeline. Actions such as timeline scrolling, all types of timeline zooms and shifts will respect this limit.

Get/set start date limit of the timeline. Actions such as timeline scrolling, all types of timeline zooms and shifts will respect this limit.

Get/set startDate. Defaults to current date if none specified.

When using infiniteScroll, use visibleDate to control initially visible date instead.

Note: If you need to set start and end date at the same time, use setTimeSpan method.

A scrolling options object describing the scroll action, including a date option which references a Date. See scrollToDate for details about scrolling options.

    // The date we want in the center of the Scheduler viewport
    myScheduler.visibleDate = {
        date    : new Date(2023, 5, 17, 12),
        block   : 'center',
        animate : true
    };

Returns an object representing the visible date range

By default the row hover effect is not visible in the Scheduler part of the grid.

Set this to false to show the hover effect in Scheduler rows.

Set to a time zone or a UTC offset. This will set the projects timeZone config accordingly. As this config is only a referer, please see project's config documentation for more information.

new Calendar(){
  timeZone : 'America/Chicago'
}

Set to false if you don't want event bar DOM updates to animate.

Returns true if any of the events/tasks or feature injected elements (such as ResourceTimeRanges) are within the timeAxis

Set to true to force the time columns to fit to the available space (horizontal or vertical depends on mode). Note that setting suppressFit to true, will disable forceFit functionality. Zooming cannot be used when forceFit is set.

Returns the partnered timelines.

• To add a new partner see addPartner method.
• To remove existing partner see removePartner method.

Set to true to prevent auto calculating of a minimal tickSize to always fit the content to the screen size. Setting this property on true will disable forceFit behaviour.

A backing data store of 'ticks' providing the input date data for the time axis of timeline panel.

Returns the TimeAxisColumn instance

Returns the subGrid containing the time axis

Returns the html element for the subGrid containing the time axis

The internal view model, describing the visual representation of the time axis.

An object with format { fromDay, toDay, fromHour, toHour } that describes the working days and hours. This object will be used to populate TimeAxis include property.

Using it results in a non-continuous time axis. Any ticks not covered by the working days and hours will be excluded. Events within larger ticks (for example if using week as the unit for ticks) will be stretched to fill the gap otherwise left by the non-working hours.

As with end dates, toDay and toHour are exclusive. Thus toDay : 6 means that day 6 (saturday) will not be included.

NOTE: When this feature is enabled Zooming feature is not supported. It's recommended to disable zooming controls:

new Scheduler({
    zoomOnMouseWheel          : false,
    zoomOnTimeAxisDoubleClick : false,
    ...
});

Highlights the elements of the passed event or assignment records (or record ids). If scrollToClosest is set to true (which it is by default), the highlighted event element closest to the viewport center will be scrolled into view.

The highlighting will be done by adding the css class b-highlighted to the highlighted event elements. Also, the css class b-is-highlighting will be added to the TimeAxisSubGrid element.

// Highlight single event
scheduler.highlightEvents({ events : 22 });
// Highlight multiple events
scheduler.highlightEvents({ events : [1, 40] });
// Don't scroll to highlighted event, and don't un-highlight on click
scheduler.highlightEvents({ events : 1000, scroll : false, unhighlightOnClick : false });

Removes highlighting from the elements of the passed event or assignment records (or record ids). If no events are passed all highlighted events will be un-highlighted.

scheduler.unhighlightEvents({ events : 22 }); // single event
scheduler.unhighlightEvents({ events : [1, 40] }); // multiple events

Partners this Timeline with the passed Timeline in order to sync the horizontal scrolling position and zoom level.

• To remove existing partner see removePartner method.
• To get the list of partners see partners getter.

The following properties are imported into this component from the added partner and shared:

• timeAxisViewModel
• timeAxis
• viewPreset

In a set of partnered Timelines, there will only be a single instance of the above properties. The time range and scroll position in that time range are always the same among all partnered timelines.

Returns a rounded duration value to be displayed in UI (tooltips, labels etc)

A chainable function which Features may hook to add their own content to the foreground canvas

A chainable function which Features may hook to add their own content to the timeaxis header.

Checks whether the passed timeline is partnered with the current timeline.

Calls the specified function (returning its return value) and preserves the timeline center point. This is a useful way of retaining the user's visual context while making updates and changes to the view which require major changes or a full refresh.

Refreshes the grid with transitions enabled.

Breaks the link between current Timeline and the passed Timeline

• To add a new partner see addPartner method.
• To get the list of partners see partners getter.

Sets the timeline end date

Note:

• If you need to set start and end date at the same time, use the setTimeSpan method.
• If keepDuration is false and new end date is less than start date, it will throw an exception.

Sets the timeline start date.

Note:

• If you need to set start and end date at the same time, use the setTimeSpan method.
• If keepDuration is false and new start date is greater than end date, it will throw an exception.

Changes the Scheduler's time axis timespan to the supplied start and end dates.