TimelineZoomable

Configs

maxZoomLevel: Number= 23Also a property

The maximum zoom level to which zoomIn will work. Defaults to the number of ViewPresets available, see presets for information. Unless you have modified the collection of available presets, the max zoom level is milliseconds.

minZoomLevel: Number= 0Also a property

The minimum zoom level to which zoomOut will work. Defaults to 0 (year ticks)

visibleZoomFactor: Number= 5

Integer number indicating the size of timespan during zooming. When zooming, the timespan is adjusted to make the scrolling area visibleZoomFactor times wider than the timeline area itself. Used in zoomToSpan and zoomToLevel functions.

zoomKeepsOriginalTimespan: Boolean

Whether the originally rendered timespan should be preserved while zooming. By default, it is set to false, meaning the timeline panel will adjust the currently rendered timespan to limit the amount of HTML content to render. When setting this option to true, be careful not to allow to zoom a big timespan in seconds resolution for example. That will cause a lot of HTML content to be rendered and affect performance. You can use minZoomLevel and maxZoomLevel config options for that.

zoomOnMouseWheel: Boolean= true

If true, you can zoom in and out on the time axis using CTRL-key + mouse wheel.

zoomOnTimeAxisDoubleClick: Boolean= true

True to zoom to time span when double-clicking a time axis cell.

Properties

Class hierarchy

isTimelineZoomable: Boolean= truereadonly

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

isTimelineZoomable: Boolean= truereadonlystatic

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

Zoom

maxZoomLevel: NumberAlso a config

Get/set the maxZoomLevel value

minZoomLevel: NumberAlso a config

Sets the minZoomLevel value

zoomLevel: Number

Current zoom level, which is equal to the ViewPreset index in the provided array of zoom levels.

Functions

Other

shift

Moves the time axis by the passed amount and unit.

NOTE: If using a filtered time axis, see shift for more information.

Parameter	Type	Description
`amount`	Number	The number of units to jump
`unit`	DurationUnitShort	The unit (Day, Week etc.)

shiftNext

Moves the time axis forward in time in units specified by the view preset shiftUnit, and by the amount specified by the shiftIncrement config of the current view preset.

NOTE: If using a filtered time axis, see shiftNext for more information.

Parameter	Type	Description
`amount`	Number	The number of units to jump forward

shiftPrevious

Moves the time axis backward in time in units specified by the view preset shiftUnit, and by the amount specified by the shiftIncrement config of the current view preset.

NOTE: If using a filtered time axis, see shiftPrevious for more information.

Parameter	Type	Description
`amount`	Number	The number of units to jump backward

zoomToFit

Changes the range of the scheduling chart to fit all the events in its event store.

Parameter	Type	Description
`options`	Object	Options object for the zooming operation.
`options.leftMargin`	Number	Defines margin in pixel between the first event start date and first visible date
`options.rightMargin`	Number	Defines margin in pixel between the last event end date and last visible date

Zoom

zoomIn

Zooms in the timeline according to the array of zoom levels. If the amount of levels to zoom is given, the view will zoom in by this value. Otherwise, a value of 1 will be used.

Parameter	Type	Description
`levels`	Number	(optional) amount of levels to zoom in
`options`	ChangePresetOptions	Object containing options which affect how the new preset is applied.

Returns: Number | null -

currentLevel New zoom level of the panel or null if level hasn't changed.

zoomInFull

Zooms in the timeline to the maxZoomLevel according to the array of zoom levels.

Parameter	Type	Description
`options`	ChangePresetOptions	Object containing options which affect how the new preset is applied.

Returns: Number | null -

currentLevel New zoom level of the panel or null if level hasn't changed.

zoomOut

Zooms out the timeline according to the array of zoom levels. If the amount of levels to zoom is given, the view will zoom out by this value. Otherwise, a value of 1 will be used.

Parameter	Type	Description
`levels`	Number	(optional) amount of levels to zoom out
`options`	ChangePresetOptions	Object containing options which affect how the new preset is applied.

Returns: Number | null -

currentLevel New zoom level of the panel or null if level hasn't changed.

zoomOutFull

Zooms out the timeline to the minZoomLevel according to the array of zoom levels.

Parameter	Type	Description
`options`	ChangePresetOptions	Object containing options which affect how the new preset is applied.

Returns: Number | null -

currentLevel New zoom level of the panel or null if level hasn't changed.

zoomTo

Zooms to passed view preset, saving center date. Method accepts config object as a first argument, which can be reduced to primitive type (string,number) when no additional options required. e.g.:

// zooming to preset
scheduler.zoomTo({ preset : 'hourAndDay' })
// shorthand
scheduler.zoomTo('hourAndDay')

// zooming to level
scheduler.zoomTo({ level : 0 })
// shorthand
scheduler.zoomTo(0)

It is also possible to zoom to a time span by omitting preset and level configs, in which case scheduler sets the time frame to a specified range and applies zoom level which allows to fit all columns to this range. The given time span will be centered in the scheduling view (unless centerDate config provided). In the same time, the start/end date of the whole time axis will be extended to allow scrolling for user.

// zooming to time span
scheduler.zoomTo({
    startDate : new Date(..),
    endDate : new Date(...)
});

Parameter	Type	Description
`config`	ViewPresetConfig \| Object \| String \| Number	Config object, preset name or zoom level index.
`config.preset`	String	Preset name to zoom to. Ignores level config in this case
`config.level`	Number	Zoom level to zoom to. Is ignored, if preset config is provided
`config.visibleDate`	VisibleDate	A `visibleDate` specification to bring into view after the zoom.
`config.startDate`	Date	New time frame start. If provided along with end, view will be centered in this time interval (unless `centerDate` is present)
`config.endDate`	Date	New time frame end
`config.centerDate`	Date	Date that should be kept in the center. Has priority over start and end params
`config.zoomDate`	Date	The date that should be positioned at the passed `datePosition` client offset.
`config.zoomPosition`	Number	The client offset at which the passed `date` should be positioned.
`config.width`	Number	Lowest tick width. Might be increased automatically
`config.leftMargin`	Number	Amount of pixels to extend span start on (used, when zooming to span)
`config.rightMargin`	Number	Amount of pixels to extend span end on (used, when zooming to span)
`config.adjustStart`	Number	Amount of units to extend span start on (used, when zooming to span)
`config.adjustEnd`	Number	Amount of units to extend span end on (used, when zooming to span)

zoomToLevel

Allows zooming to certain level of presets array. Automatically limits zooming between maxZoomLevel and minZoomLevel. Can also set time axis timespan to the supplied start and end dates.

Parameter	Type	Description
`preset`	Number	Level to zoom to.
`options`	ChangePresetOptions	Object containing options which affect how the new preset is applied.

Returns: Number | null -

level Current zoom level or null if it hasn't changed.

zoomToSpan

Sets time frame to specified range and applies zoom level which allows to fit all columns to this range.

The given time span will be centered in the scheduling view, in the same time, the start/end date of the whole time axis will be extended in the same way as zoomToLevel method does, to allow scrolling for user.

Parameter	Type	Description
`config`	Object	The time frame.
`config.startDate`	Date	The time frame start.
`config.endDate`	Date	The time frame end.
`config.centerDate`	Date	Date that should be kept in the center. Has priority over start and end params
`config.leftMargin`	Number	Amount of pixels to extend span start on
`config.rightMargin`	Number	Amount of pixels to extend span end on
`config.adjustStart`	Number	Amount of units to extend span start on
`config.adjustEnd`	Number	Amount of units to extend span end on

Returns: Number | null -

level Current zoom level or null if it hasn't changed.

Events

noZoomChange

Fires when the requested date range cannot fit into any zoom level higher than the current level.

// Adding a listener using the "on" method
timelineZoomable.on('noZoomChange', ({ currentZoomLevel, startDate, endDate }) => {

});

Parameter	Type	Description
`currentZoomLevel`	Number	The current zoom level
`startDate`	Date	The requested start date
`endDate`	Date	The requested end date

Event handlers

onNoZoomChange

Called when the requested date range cannot fit into any zoom level higher than the current level.

new TimelineZoomable({
    onNoZoomChange({ currentZoomLevel, startDate, endDate }) {

    }
});

Parameter	Type	Description
`currentZoomLevel`	Number	The current zoom level
`startDate`	Date	The requested start date
`endDate`	Date	The requested end date

Typedefs

ChangePresetOptions

Options which may be used when changing the viewPreset property.

Parameter	Type	Description
`visibleDate`	VisibleDate	A `visibleDate` specification to bring into view after the new `ViewPreset` is applied.
`startDate`	Date	New time frame start. If provided along with end, view will be centered in this time interval, ignoring centerDate config. Ignored if infiniteScroll is used.
`endDate`	Date	New time frame end. Ignored if infiniteScroll is used.
`centerDate`	Date	Date to keep in center. Is ignored when start and end are provided.
`zoomDate`	Date	The date that should be positioned at the passed `datePosition` client offset.
`zoomPosition`	Number	The client offset at which the passed `zoomDate` should be positioned.
`width`	Number	Lowest tick width. Might be increased automatically