ViewPreset

A ViewPreset is a record of PresetStore which describes the granularity of the timeline view of a Scheduler and the layout and subdivisions of the timeline header.

You can create a new instance by specifying all fields:

const myViewPreset = new ViewPreset({
    id   : 'myPreset',              // Unique id value provided to recognize your view preset. Not required, but having it you can simply set new view preset by id: scheduler.viewPreset = 'myPreset'

    name : 'My view preset',        // A human-readable name provided to be used in GUI, e.i. preset picker, etc.

    tickWidth  : 24,                // Time column width in horizontal mode
    tickHeight : 50,                // Time column height in vertical mode
    displayDateFormat : 'HH:mm',    // Controls how dates will be displayed in tooltips etc

    shiftIncrement : 1,             // Controls how much time to skip when calling shiftNext and shiftPrevious.
    shiftUnit      : 'day',         // Valid values are 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.
    defaultSpan    : 12,            // By default, if no end date is supplied to a view it will show 12 hours

    timeResolution : {              // Dates will be snapped to this resolution
        unit      : 'minute',       // Valid values are 'millisecond', 'second', 'minute', 'hour', 'day', 'week', 'month', 'quarter', 'year'.
        increment : 15
    },

    headers : [                     // This defines your header rows from top to bottom
        {                           // For each row you can define 'unit', 'increment', 'dateFormat', 'renderer', 'align', and 'thisObj'
            unit       : 'day',
            dateFormat : 'ddd DD/MM'
        },
        {
            unit       : 'hour',
            dateFormat : 'HH:mm'
        }
    ],

    columnLinesFor : 1              // Defines header level column lines will be drawn for. Defaults to the last level.
});

Or you can extend one of view presets registered in PresetManager:

const myViewPreset2 = new ViewPreset({
    id   : 'myPreset',                  // Unique id value provided to recognize your view preset. Not required, but having it you can simply set new view preset by id: scheduler.viewPreset = 'myPreset'
    name : 'My view preset',            // A human-readable name provided to be used in GUI, e.i. preset picker, etc.
    base : 'hourAndDay',                // Extends 'hourAndDay' view preset provided by PresetManager. You can pick out any of PresetManager's view presets: PresetManager.records

    timeResolution : {                  // Override time resolution
        unit      : 'minute',
        increment : 15                  // Make it increment every 15 mins
    },

    headers : [                         // Override headers
        {
            unit       : 'day',
            dateFormat : 'DD.MM.YYYY'   // Use different date format for top header 01.10.2020
        },
        {
            unit       : 'hour',
            dateFormat : 'LT'
        }
    ]
});

See PresetManager for the list of base presets. You may add your own presets to this global list:

PresetManager.add(myViewPreset);     // Adds new preset to the global scope. All newly created scheduler instances will have it too.

const scheduler = new Scheduler({
    viewPreset : 'myPreset'
    // other configs...
});

Or add them on an individual basis to Scheduler instances:

const scheduler = new Scheduler({...});

scheduler.presets.add(myViewPreset); // Adds new preset to the scheduler instance only. All newly created scheduler instances will **not** have it.

scheduler.viewPreset = 'myPreset';

Defining custom header rows

You can have any number of header rows by specifying headers, see ViewPresetHeaderRow for the config object format and DateHelper for the supported date formats, or use to render custom contents into the row cells.

 headers : [
     {
         unit       : 'month',
         dateFormat : 'MM.YYYY'
     },
     {
         unit       : 'week',
         renderer   : ({ startDate }) => `Week ${DateHelper.format(startDate, 'WW')}`
     }
 ]

This live demo shows a custom ViewPreset with AM/PM time format:

Using embedded text inside format string

Arbitrary text can be embedded in the format string by wrapping it with {}:

 headers : [
     {
         unit       : 'month',
         dateFormat : '{It is }MMMM{, yay!}' -> It is January, yay!
     },
     {
         unit       : 'week',
         renderer   : ({ startDate }) => `Week ${DateHelper.format(startDate, 'WW')}`
     }
 ]