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')}`
     }
 ]

Useful configs and functions

Member	Description
base	Base preset to extend from
tickWidth	Width of each time tick in pixels
rowHeight	Default row height in pixels
displayDateFormat	Date format string for tooltips
headers	Array of header row configurations
timeResolution	Resolution for snapping and rounding
shiftUnit	Unit used when shifting the time axis

Fields

Fields belong to a Model class and define the Model data structure

base : String

The name of an existing view preset to extend
columnLinesFor : Number

Index of a header level in the headers array for which column lines are drawn. See ColumnLines. Defaults to the bottom header.
defaultSpan : Number

The amount of time to show by default in a view (in the unit defined by mainUnit)
displayDateFormat : String

Defines how dates will be formatted in tooltips etc
headers : ViewPresetHeaderRow[]

An array containing one or more ViewPresetHeaderRow config objects, each of which defines a level of headers for the scheduler. The main unit will be the last header's unit, but this can be changed using the mainHeaderLevel field.
mainHeaderLevel : Number

Index of the headers array to define which header level is the main header. Defaults to the bottom header.
mainUnit : DurationUnit

Initially set to a unit. Defaults to the unit defined by the middle header.
name : String

The name of the view preset
rowHeight : Number

The height of the row in horizontal orientation
shiftIncrement : Number

The amount to shift (in shiftUnits)
shiftUnit : DurationUnit

The unit to shift when calling shiftNext/shiftPrevious to navigate in the chart. Valid values are "millisecond", "second", "minute", "hour", "day", "week", "month", "quarter", "year".
start : Number/String

Note: Currently, this field only applies when changing viewPreset with the ViewPresetCombo.

Set to a number and that amount of mainUnit will be added to the startDate. For example: A start value of 5 together with the mainUnit hours will add 5 hours to the startDate. This can achieve a "day view" that starts 5 AM.

Set to a string unit (for example week, day, month) and the startDate will be the start of that unit calculated from current startDate. A start value of week will result in a startDate in the first day of the week.

If set to a number or not set at all, the startDate will be calculated at the beginning of current mainUnit.
tickHeight : Number

The height of the time tick column in vertical orientation
tickWidth : Number

The width of the time tick column in horizontal orientation
timeResolution : ViewPresetTimeResolution
An object containing a unit identifier and an increment variable. This value means minimal task duration you can create using UI. For example when you drag create a task or drag & drop a task, if increment is 5 and unit is 'minute' that means that you can create a 5-minute-long task, or move it 5 min forward/backward. This config maps to scheduler's timeResolution config.
```
timeResolution : {
  unit      : 'minute',  //Valid values are "millisecond", "second", "minute", "hour", "day", "week", "month", "quarter", "year".
  increment : 5
}
```
useForSmoothZoom : Boolean

Set to false to exclude this preset from the smooth zooming algorithm. This means that when zooming in or out in a Scheduler configured with smoothZoom : true, the view will not switch to this preset.

Properties

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

isViewPreset : Booleantrue

READONLY

static

ADVANCED

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

isViewPreset : Booleantrue

READONLY

ADVANCED

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

Type definitions

ViewPresetTimeResolution
An object containing a unit identifier and an increment variable, used to define the timeResolution of a ViewPreset.
Properties
- unit : String
  
  The unit of the resolution, e.g. 'minute'
- increment : Number
  
  The increment of the resolution, e.g. 15

ViewPresetHeaderRow

Defines a header level for a ViewPreset.

A sample header configuration can look like below

headers    : {
    {
        unit        : "month",
        renderer(start, end, headerConfig, index) {
            var month = start.getMonth();
            // Simple alternating month in bold
            if (start.getMonth() % 2) {
                return '<strong>' + month + '</strong>';
            }
            return month;
        },
        align       : 'start' // `start` or `end`, omit to center content (default)
    },
    {
        unit        : "week",
        increment   : 1,
        renderer(start, end, headerConfig, index) {
            return 'foo';
        }
    },
}

Properties

align : 'start'/'center'/'end'

The text alignment for the cell. Valid values are start or end, omit this to center text content (default). Can also be added programmatically in the renderer.
unit : DurationUnit

The unit of time represented by each cell in this header row. See also increment property. Valid values are "millisecond", "second", "minute", "hour", "day", "week", "month", "quarter", "year".
headerCellCls : String

A CSS class to add to the cells in the time axis header row. Can also be added programmatically in the renderer.
increment : Number

The number of units each header cell will represent (e.g. 30 together with unit: "minute" for 30 minute cells)
dateFormat : String

Defines how the cell date will be formatted

renderer : Function

A custom renderer function used to render the cell content. It should return text/HTML to put in the header cell.

function (startDate, endDate, headerConfig, i) {
  // applies special CSS class to align header left
  headerConfig.align = "start";
  // will be added as a CSS class of the header cell DOM element
  headerConfig.headerCellCls = "myClass";

  return DateHelper.format(startDate, 'YYYY-MM-DD');
}

The render function is called with the following parameters:

startDate : Date

The start date of the cell.
endDate : Date

The end date of the cell.
headerConfig : Object

An object containing the header config.
align : 'start'/'center'/'end'

The text alignment for the cell. See align above.
headerCellCls : String

A CSS class to add to the cells in the time axis header row. See headerCellCls above.
index : Number

The index of the cell in the row.
timeline : TimelineBase

The timeline widget (e.g. Scheduler or Gantt)
returns : DomConfig/String/null

The rendered content for the header cell
thisObj : Object

this reference for the renderer function

cellGenerator : Function

A function that should return an array of objects containing 'start', 'end' and 'header' properties. Use this if you want full control over how the header rows are generated.

Note:cellGenerator cannot be used for the bottom level of your headers.

Example :

viewPreset : {
    displayDateFormat : 'H:mm',
    shiftIncrement    : 1,
    shiftUnit         : 'WEEK',
    timeResolution    : {
        unit      : 'MINUTE',
        increment : 10
    },
    headers           : [
        {
            unit          : 'year',
            // Simplified scenario, assuming view will always just show one US fiscal year
            cellGenerator : (viewStart, viewEnd) => [{
                start  : viewStart,
                end    : viewEnd,
                header : `Fiscal Year ${viewStart.getFullYear() + 1}`
            }]
        },
        {
            unit : 'quarter',
            renderer(start, end, cfg) {
                const
                    quarter       = Math.floor(start.getMonth() / 3) + 1,
                    fiscalQuarter = quarter === 4 ? 1 : (quarter + 1);

                return `FQ${fiscalQuarter} ${start.getFullYear() + (fiscalQuarter === 1 ? 1 : 0)}`;
            }
        },
        {
            unit       : 'month',
            dateFormat : 'MMM Y'
        }
    ]
 },

Source path

Scheduler/preset/ViewPreset.js

ViewPreset

Defining custom header rows

Using embedded text inside format string

Useful configs and functions

See also

Fields

Properties

Type definitions

Properties

Properties

Source path

Inheritance tree3

Mixins3

Contents