Header bar in JavaScript Scheduler control
18 Nov 20182 minutes to read
The header part of Scheduler can be customized easily with the built-in options available.
Show or Hide header bar
By default, the header bar displays the date and view navigation options, through which the user can switch between the dates and various views. This header bar can be hidden from the UI by setting false to the showHeaderBar property. It’s default value is true.
Customizing header bar using template
Apart from the default date navigation and view options available on the header bar, the custom items can be add into the Scheduler header bar using the toolbarItems property. To display the default items, it’s Essential® to assign a name field to each item. The names of the default items are Previous, Next, Today, DateRangeText, NewEvent, and Views. For custom items you can give the name as Custom to the name field. Here, the default items such as previous, next, date range text, and today have been used along with external dropdown list as custom items.
Customizing header bar using events
Apart from the default date navigation and view options available on the header bar, the =custom items can be add into the Scheduler header bar using the actionBegin event. Here, an employee image is added to the header bar, clicking on which will open the popup showing that person’s short profile information.
How to display the view options within the header bar popup
By default, the header bar displays the view navigation options, through which the user can switch between various views. View options can be moved to the header bar popup by setting true to the enableAdaptiveUI property.
Refer to the here to learn more about adaptive UI in resources scheduler.
Date header customization
The Scheduler UI that displays the date text on all views are considered as the date header cells. Customize the date header cells of Scheduler either using dateHeaderTemplate or renderCell event.
Using date header template
The dateHeaderTemplate option is used to customize the date header cells of day, week and work-week views.
Using renderCell event
In month view, the date header template is not applicable and therefore the same customization can be added beside the date text in month cells by making use of the renderCell event.
Customizing the date range text
The dateRangeTemplate option allows to customize the text content of the date range displayed in the scheduler. By default, the date range text is determined by the scheduler view being used. However, using the dateRangeTemplate option to override the default text and specify your own custom text to be displayed.
The dateRangeTemplate property includes startDate, endDate and currentView options. The date range text can be customized using these available options.
Customizing header indent cells
Customize the header indent cells using the headerIndentTemplate option and change the look and appearance in both the vertical and timeline views. In vertical views, the template customizes the indent area at the top-left corner where the time column header meets the date headers. In timeline views, it customizes the left indent area that appears before the resource headers.
Example: To customize the header left indent cell to display resources text, refer to the below code example.
Refer to the JavaScript Scheduler feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Scheduler example to see practical implementations of data presentation and manipulation techniques.