TimelineZoomable
Mixin

Mixin providing legacy "zooming" functionality. For a nicer UX, we recommend opting in to smooth zooming instead, which will be the default from v8.

Legacy zooming

The zoom levels are stored as instances of ViewPresets, and are cached centrally in the PresetManager.

The default presets are loaded into the presets store upon Scheduler instantiation. Preset selection is covered in the TimelineViewPresets mixin.

To specify custom zoom levels please provide a set of view presets to the global PresetManager store before scheduler creation, or provide a set of view presets to a specific scheduler only:

const myScheduler = new Scheduler({
    presets : [
        {
            base : 'hourAndDay',
            id   : 'MyHourAndDay',
            // other preset configs....
        },
        {
            base : 'weekAndMonth',
            id   : 'MyWeekAndMonth',
            // other preset configs....
        }
    ],
    viewPreset : 'MyHourAndDay',
    // other scheduler configs....
    });

Smooth zooming

See TimelineSmoothZoom for information on the smooth zooming system, which is opt-in and will be the default in v8. To enable:

const myScheduler = new Scheduler({
   smoothZoom : true,

   // other scheduler configs....
});

Configs

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

maxZoomLevel : Number/String23
The maximum zoom level to which zoomIn will work.

When using smooth zoom:

This config accepts a number which indicates the maximum smooth zoom level allowed. Since smooth zoom levels are generated based on the provided presets, it is often instead easier to pass a preset name. Passing hourAndDay would prevent zooming further in than that, so for example the minuteAndHour preset would not be reachable.
```
const scheduler = new Scheduler({
  smoothZoom   : true,
  maxZoomLevel : 'hourAndDay'
});
```
When using legacy zoom:

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.

Has a corresponding runtime maxZoomLevel property.
minZoomLevel : Number/String0
The minimum zoom level to which zoomOut will work.

When using smooth zoom:

This config accepts a number which indicates the minimum smooth zoom level allowed. Since smooth zoom levels are generated based on the provided presets, it is often instead easier to pass a preset name. Passing weekAndDayLetter would prevent zooming further out than that, so for example the weekDateAndMonth preset would not be reachable.
```
const scheduler = new Scheduler({
  smoothZoom   : true,
  minZoomLevel : 'weekAndDayLetter'
});
```
When using legacy zoom:

Defaults to 0 (year ticks).

Has a corresponding runtime minZoomLevel property.
visibleZoomFactor : Number5

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 : Booleantrue

If true, you can zoom in and out on the time axis using CTRL + mouse wheel.
zoomOnTimeAxisDoubleClick : Booleantrue

If true, you can zoom to a time span by double-clicking a time axis cell.

Properties

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

isTimelineZoomable : Booleantrue

READONLY

static

ADVANCED

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

isTimelineZoomable : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of TimelineZoomable class, or subclass thereof.
maxZoomLevel : Number/String23
The maximum zoom level to which zoomIn will work.

When using smooth zoom:

This config accepts a number which indicates the maximum smooth zoom level allowed. Since smooth zoom levels are generated based on the provided presets, it is often instead easier to pass a preset name. Passing hourAndDay would prevent zooming further in than that, so for example the minuteAndHour preset would not be reachable.
```
const scheduler = new Scheduler({
  smoothZoom   : true,
  maxZoomLevel : 'hourAndDay'
});
```
When using legacy zoom:

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.

Has a corresponding maxZoomLevel config.
maxZoomLevel : Number

Get/set the maxZoomLevel value

Has a corresponding maxZoomLevel config.
minZoomLevel : Number/String0
The minimum zoom level to which zoomOut will work.

When using smooth zoom:

This config accepts a number which indicates the minimum smooth zoom level allowed. Since smooth zoom levels are generated based on the provided presets, it is often instead easier to pass a preset name. Passing weekAndDayLetter would prevent zooming further out than that, so for example the weekDateAndMonth preset would not be reachable.
```
const scheduler = new Scheduler({
  smoothZoom   : true,
  minZoomLevel : 'weekAndDayLetter'
});
```
When using legacy zoom:

Defaults to 0 (year ticks).

Has a corresponding minZoomLevel config.
minZoomLevel : Number

Sets the minZoomLevel value

Has a corresponding minZoomLevel config.
zoomLevel : Number

Current zoom level.

When not using smoothZoom, it is equal to the ViewPreset index in the provided array of zoom levels.

When using smoothZoom, it returns the smooth zoom index closest to the current tick size. If the current preset is not flagged with useForSmoothZoom, finds the closest preset that is.

Functions

Functions are methods available for calling on the class

getMilliSecondsPerPixelForZoomLevel( level, ignoreActualWidth )
: Number

private

Returns number of milliseconds per pixel.
shift( amount, unit )

Moves the time axis by the passed amount and unit.

NOTE: If using a filtered time axis, see shift for more information.
shiftNext( amount )

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.
shiftPrevious( amount )

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.
zoomToFit( options )

Changes the range of the scheduling chart to fit all the events in its event store.
zoomIn( levels1, options )
: Number/null/Promise

ASYNC
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.

When using smoothZoom:
- levels instead specifies how many view presets to zoom in (by default it zooms to the next view preset).
- Passing a fractional levels value (<1) will zoom to a point between the current and next view preset, allowing for more precise zooming. Eg. 0.5 will zoom to a point halfway between the current and next preset.
- Can be animated by passing { animate : true } in the options parameter.
```
// Zoom in by one level with animation (requires smoothZoom: true)
scheduler.zoomIn({ animate : true });

// Zoom in by 0.5 levels (halfway to the next preset) with animation (requires smoothZoom: true)
scheduler.zoomIn(0.5, { animate : true });
```
zoomInFull( options )
: Number/null/Promise

ASYNC

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

When smoothZoom is enabled, this zooms to the maximum smooth zoom level.
zoomOut( levels1, options )
: Number/null/Promise

ASYNC
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.

When using smoothZoom:
- levels instead specifies how many view presets to zoom out (by default it zooms to the previous view preset).
- Passing a fractional levels value (<1) will zoom to a point between the current and previous view preset, allowing for more precise zooming. Eg. 0.5 will zoom to a point halfway between the current and previous preset.
- Can be animated by passing { animate : true } in the options parameter.
```
// Zoom out by one level with animation (requires smoothZoom: true)
scheduler.zoomOut({ animate : true });

// Zoom out by 0.5 levels (halfway to the previous preset) with animation (requires smoothZoom: true)
scheduler.zoomOut(0.5, { animate : true });
```
zoomOutFull( options )
: Number/null/Promise

ASYNC

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

When smoothZoom is enabled, this zooms to the minimum smooth zoom level.
zoomTo( config )
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 fitting 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(...)
});
```
zoomToLevel( preset, options )
: Number/null

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.
zoomToSpan( config )
: Number/null

Sets time frame to specified range and applies zoom level which allows fitting 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.

Events

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

noZoomChange

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

Event handlers

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

onNoZoomChange

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

Type definitions

ChangePresetOptions
Options which may be used when changing the viewPreset property.
Properties
- 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 zoomPosition client offset.
- zoomPosition : Number
  
  The client offset at which the passed zoomDate should be positioned.
- width : Number
  
  Lowest tick width. Might be increased automatically
- animate : Boolean
  
  When true and smoothZoom is enabled, animates a zoom operation.

Source path

Scheduler/view/mixin/TimelineZoomable.js

Inheritance tree1

TimelineZoomable

TimelineZoomable
Mixin

Legacy zooming

Smooth zooming

See also

Configs

Properties

Functions

Events

Event handlers

Type definitions

Properties

Source path

Inheritance tree1

Contents

TimelineZoomable Mixin

Legacy zooming

Smooth zooming

See also

Configs

Properties

Functions

Events

Event handlers

Type definitions

Properties

Source path

Inheritance tree1

Contents

TimelineZoomable
Mixin