Header customization

18 Nov 20181 minute 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 holds 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

Apart from the default date navigation and view options available on the header bar, you can add custom items into the Scheduler header bar by making use of 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 holds the view navigation options, through which the user can switch between various views. You can move this view options to the header bar popup by setting true to the EnableAdaptiveUI property.

NOTE

Refer here to know 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. You can 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 you 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, you can use 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, you can customize the date range text using these available options.

NOTE

You can refer to our ASP.NET MVC Scheduler feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET MVC Scheduler example to knows how to present and manipulate data.