TimelineSmoothZoom

Mixin

Mixin providing smooth zooming functionality for timeline views.

How it works

Without smooth zoom, the Scheduler jumps between discrete ViewPresets when zooming in or out. Each preset defines its own time resolution, header rows and tick size — so zooming feels like switching between a fixed set of snapshots.

With smooth zoom enabled, the system builds an internal index of interpolated zoom levels between each pair of presets. Instead of jumping, it continuously scales the tick size within a preset's range and seamlessly transitions to the next preset when the boundary is reached. This produces a fluid, map-like zoom experience.

Legacy zoom (discrete presets):

Smooth zoom (interpolated levels):

Enabling smooth zoom

Set the smoothZoom config to true:

const scheduler = new Scheduler({
    smoothZoom : true
});

When enabled, all standard zoom methods (zoomIn, zoomOut, zoomInFull, zoomOutFull, zoomToSpan) automatically use the smooth zoom system. Mouse wheel and trackpad pinch gestures also zoom smoothly.

Animated programmatic zoom

Pass animate : true to zoom methods for a smooth animated transition:

// Animated zoom in / out
await scheduler.zoomIn({ animate : true });
await scheduler.zoomOut({ animate : true, steps : 20 });

// Animated zoom to fit
await scheduler.zoomToFit({ animate : true });

TimeZoomSlider widget

The TimeZoomSlider widget provides a visual slider for controlling the smooth zoom level. Add it to a toolbar for interactive zoom control:

const scheduler = new Scheduler({
    smoothZoom : true,
    tbar : [
        { type : 'timezoomslider' }
    ]
});

Excluding presets

By default, the following presets are part of the smooth zoom sequence and will have interpolated levels generated between them:

• manyYears
• `year
• monthAndYear
• weekDateAndMonth
• weekAndDayLetter
• amPm
• hourAndDay
• minuteAndHour
• fifteenMinutesAndHour

Individual presets can be excluded from the smooth zoom sequence by setting useForSmoothZoom : false on the preset. The zoom system will skip these presets when building its interpolated index:

const scheduler = new Scheduler({
    smoothZoom : true,
    presets : [
        { base : 'hourAndDay' },
        { base : 'minuteAndHour', useForSmoothZoom : false },
        { base : 'weekAndMonth' }
    ]
});

See also

• TimelineZoomable - Legacy zooming functionality
• TimeZoomSlider - Zoom slider widget
• ViewPreset - View preset definition