TimelineBase
Abstract

Abstract base class used by timeline based components such as Scheduler and Gantt. Based on Grid, supplies a "locked" region for columns and a "normal" for rendering of events etc.

Configs

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

durationDisplayPrecision : Number/Boolean1

Decimal precision used when displaying durations, used by tooltips and DurationColumn. Specify false to use raw value
endDate : Date/String

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.

Has a corresponding runtime endDate property.
maxDate : Date/String

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

Has a corresponding runtime maxDate property.
minDate : Date/String

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

Has a corresponding runtime minDate property.
startDate : Date/String

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.

Has a corresponding runtime startDate property.
visibleDate : Date/VisibleDate
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'
    }
```
Has a corresponding runtime visibleDate property.
eventCls : String

private

CSS class to add to rendered events
overScheduledEventClass : String

private

A CSS class to apply to each event in the view on mouseover.
timeCellCls : String

private

CSS class to add to cells in the timeaxis column
defaultRegion : Stringlocked

Region to which columns are added when they have none specified
hideRowHover : Booleantrue

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.

Has a corresponding runtime hideRowHover property.
timeZone : String/Number
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'
}
```
Has a corresponding runtime timeZone property.
enableEventAnimations : Booleantrue

DEPRECATED

Deprecated:
7.0.0 Deprecated enableEventAnimations. Use transition.changeEvent instead

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

Has a corresponding runtime enableEventAnimations property.
snapRelativeToEventStartDate : Booleanfalse
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.
autoAdjustTimeAxis : Booleantrue

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.
forceFit : Booleanfalse

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.

Has a corresponding runtime forceFit property.
partner : TimelineBase/String
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.
stickyHeaders : Booleantrue

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

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.

Has a corresponding runtime suppressFit property.
timeAxis : TimeAxisConfig/TimeAxis

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.

Has a corresponding runtime timeAxis property.
timeAxisViewModel : TimeAxisViewModel/TimeAxisViewModelConfig

private

The backing view model for the visual representation of the time axis. Either a real instance or a simple config object.

Has a corresponding runtime timeAxisViewModel property.
weekStartDay : Number

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.
workingTime : Object
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,
    ...
});
```
- fromDay : Number
  
  Day index 0-6 (0 is Sunday)
- toDay : Number
  
  Day index 0-6 (0 is Sunday)
- fromHour : Number
  
  0-23
- toHour : Number
  
  0-23
Has a corresponding runtime workingTime property.

Properties

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

isTimelineBase : Booleantrue

READONLY

static

ADVANCED

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

endDate : Date

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.

Has a corresponding endDate config.
maxDate : Date/String

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

Has a corresponding maxDate config.
minDate : Date/String

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

Has a corresponding minDate config.
startDate : Date

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.

Has a corresponding startDate config.
visibleDate : Object
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
    };
```
Has a corresponding visibleDate config.
isTimelineBase : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of TimelineBase class, or subclass thereof.
visibleDateRange : Object

READONLY
Returns an object representing the visible date range
- startDate : Date
  Start date
- endDate : Date
  End date
hideRowHover : Booleantrue

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.

Has a corresponding hideRowHover config.
timeZone : String/Number
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'
}
```
Has a corresponding timeZone config.
enableEventAnimations : Booleantrue

DEPRECATED

Deprecated:
7.0.0 Deprecated enableEventAnimations. Use transition.changeEvent instead

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

Has a corresponding enableEventAnimations config.
hasVisibleEvents : Boolean

READONLY

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

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.

Has a corresponding forceFit config.
partners : TimelineBase[]

READONLY
Returns the partnered timelines.
- To add a new partner see addPartner method.
- To remove existing partner see removePartner method.
suppressFit : Booleanfalse

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.

Has a corresponding suppressFit config.
timeAxis : TimeAxis

READONLY

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

Has a corresponding timeAxis config.
timeAxisColumn : TimeAxisColumn/VerticalTimeAxisColumn

READONLY

Returns the TimeAxisColumn instance
timeAxisSubGrid : SubGrid

READONLY

Returns the subGrid containing the time axis
timeAxisSubGridElement : HTMLElement

READONLY

Returns the html element for the subGrid containing the time axis
timeAxisViewModel : TimeAxisViewModel

READONLY

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

Has a corresponding timeAxisViewModel config.
workingTime : Object
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,
    ...
});
```
- fromDay : Number
  
  Day index 0-6 (0 is Sunday)
- toDay : Number
  
  Day index 0-6 (0 is Sunday)
- fromHour : Number
  
  0-23
- toHour : Number
  
  0-23
Has a corresponding workingTime config.

Functions

Functions are methods available for calling on the class

addPartner( otherTimeline )
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:
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.
formatDuration( duration, nbrDecimals )
: Number

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

A chainable function which Features may hook to add their own content to the foreground canvas
getHeaderDomConfigs( configs )

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

private

Overrides initScroll from Grid, listens for horizontal scroll to do virtual event rendering
isPartneredWith( partner )
: Boolean

Checks whether the passed timeline is partnered with the current timeline.
onBodyResize( element, oldRect, newRect )

private

Called when the element which encapsulates the Scheduler's visible height changes size. We only respond to height changes here. The TimeAxisSubGrid monitors its own width.
populateEventMenu( options )

internal

Populates the event context menu. Chained in features to add menu items.
populateScheduleMenu( options )

internal

Populates the time axis context menu. Chained in features to add menu items.
preserveViewCenter( fn, thisObj, ...args )

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.
refreshWithTransition( )

Refreshes the grid with transitions enabled.
removePartner( otherTimeline )
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.
setEndDate( date, keepDurationfalse )
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.
setStartDate( date, keepDurationtrue )
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.
setTimeSpan( newStartDate, newEndDate, options )
: Promise

ASYNC

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

private

Applies the start and end date to each event store request (formatted in the same way as the start date field, defined in the EventStore Model class).
highlightEvents( options )
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 });
```
unhighlightEvents( options )
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
```

Events

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

dateRangeChange

Fired when the range of dates encapsulated by the UI changes. This will be when moving a view in time by reconfiguring its timeAxis. This will happen when zooming, or changing viewPreset.

Contrast this with the visibleDateRangeChange event which fires much more frequently, during scrolling along the time axis and changing the visible date range.
timeAxisChange

Fired when the timeaxis has changed, for example by zooming or configuring a new time span.
timelineViewportResize

Fired when the scheduler viewport (not the overall Scheduler element) changes size. This happens when the grid changes height, or when the subgrid which encapsulates the scheduler column changes width.
visibleDateRangeChange
Fired when the range of dates visible within the viewport changes. This will be when scrolling along a time axis.

Note that this event will fire frequently during scrolling, so any listener should probably be added with the buffer option to slow down the calls to your handler function :
```
listeners : {
    visibleDateRangeChange({ old, new }) {
        this.updateRangeRequired(old, new);
    },
    // Only call once. 300 ms after the last event was detected
    buffer : 300
}
```

Event handlers

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

onDateRangeChange

Called when the range of dates encapsulated by the UI changes. This will be when moving a view in time by reconfiguring its timeAxis. This will happen when zooming, or changing viewPreset.

Contrast this with the visibleDateRangeChange event which fires much more frequently, during scrolling along the time axis and changing the visible date range.
onTimeAxisChange

Called when the timeaxis has changed, for example by zooming or configuring a new time span.
onTimelineViewportResize

Called when the scheduler viewport (not the overall Scheduler element) changes size. This happens when the grid changes height, or when the subgrid which encapsulates the scheduler column changes width.
onVisibleDateRangeChange
Called when the range of dates visible within the viewport changes. This will be when scrolling along a time axis.

Note that this event will fire frequently during scrolling, so any listener should probably be added with the buffer option to slow down the calls to your handler function :
```
listeners : {
    visibleDateRangeChange({ old, new }) {
        this.updateRangeRequired(old, new);
    },
    // Only call once. 300 ms after the last event was detected
    buffer : 300
}
```

Type definitions

VisibleDate
Options accepted by the Scheduler's visibleDate property.
Properties
- date : Date
  
  The date to bring into view.
- block : 'start'/'end'/'center'/'nearest'
  
  How far to scroll the date.
- edgeOffset : Number
  
  edgeOffset A margin around the date to bring into view.
- animate : AnimateScrollOptions/Boolean/Number
  
  Set to true to animate the scroll by 300ms, or the number of milliseconds to animate over, or an animation config object.

Source path

Scheduler/view/TimelineBase.js

TimelineBase
Abstract

See also

Configs

Properties

Functions

Events

Event handlers

Type definitions

Properties

Source path

Inheritance tree7

Mixins24

Contents

TimelineBase Abstract

See also

Configs

Properties

Functions

Events

Event handlers

Type definitions

Properties

Source path

Inheritance tree7

Mixins24

Contents

TimelineBase
Abstract