ViewPresetHeaderRow

A part of the ViewPreset declaration. Not used directly, but the properties below are instead provided inline as seen in sources of PresetManager. This class is just provided for documentation purposes.

A sample header configuration can look like below

headers    : {
    {
        unit        : "month",
        renderer : function(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    : function(start, end, headerConfig, index) {
            return 'foo';
        }
    },
}

Useful configs and functions

Member	Description
unit	Time unit for the header row
increment	Increment of the time unit
dateFormat	Date format string for cell content
renderer	Custom cell renderer function
align	Text alignment in header cells

Configs

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

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

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'
        }
    ]
 },

Parameters

viewStart : Date

View start date
viewEnd : Date

View end date

Returns

Array

dateFormat : String

Defines how the cell date will be formatted
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)
renderer : Function
A custom renderer function used to render the cell content. It should return text/HTML to put in the header cell. The render function is called with the following parameters:
```
function (startDate, endDate, headerConfig, i) {
  headerConfig.align = "start"; // applies special CSS class to align header left
  headerConfig.headerCellCls = "myClass"; // will be added as a CSS class of the header cell DOM element

  return DateHelper.format(startDate, 'YYYY-MM-DD');
}
```
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 config.
- headerCellCls : String
  
  A CSS class to add to the cells in the time axis header row. See headerCellCls config.
- index : Number
  
  The index of the cell in the row.
- timeline : TimelineBase
  
  The timeline widget (e.g. Scheduler or Gantt)
Returns

DomConfig/String/null
thisObj : Object

this reference for the renderer function
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".

Source path

Scheduler/preset/ViewPresetHeaderRow.js

Inheritance tree1

ViewPresetHeaderRow

ViewPresetHeaderRow

Useful configs and functions

See also

Configs

Parameters

Returns

Parameters

Returns

Source path

Inheritance tree1

Contents