Calendar Headers

The calendar control can display different headers, depending on the current view, which can be controlled via the corresponging *viewSettings property - namely monthRangeSettings, monthSettings, weekRangeSettings, listSettings, timetableSettings, resourceViewSettings and timelineSettings.

MonthRange View

The MonthRange view supports a main header, controlled by the MonthRangeSettings.headerStyle property, which can optionally display a title and/or navigation buttons, used to scroll back and forth the displayed month range. The format of the displayed title can be modified via the titleFormat and titleSeparator properties.

SingleMonth View

The SingleMonth view supports a main header, controlled by the MonthSettings.headerStyle property, which can optionally display a title and/or navigation buttons, used to scroll back and forth months and years. The format of the displayed title can be modified via the titleFormat property.
It can also display a vertical header, containing week numbers to the left or right of the view contents and a horizontal header, containing the day names. The properties specifying the display mode of these two headers are weekHeaderStyle and dayNamesHeaderStyle.
The display format of single day cells are set through the generalFormat, firstDayOfMonthFormat and firstDayOfYearFormat properties.

WeekRange View

The WeekRange view supports a main header, controlled by the WeekRangeSettings.headerStyle property, which displays a title, formatted by the titleFormat and titleSeparator properties. An additional horizontal header, containing the day names can be displayed by setting the dayNamesHeaderStyle property. The display format of single day cells are set through the generalFormat, firstDayOfMonthFormat and firstDayOfYearFormat properties.

The following code customizes a calendar with a WeekRange view:

JavaScript

var p = MindFusion.Scheduling;// create a new instance of the calendar
calendar = new p.Calendar(document.getElementById("calendar"));
// set the view to WeekRange
calendar.currentView = p.CalendarView.WeekRange;
//customize the weekRangeView:
calendar.weekRangeSettings.dayNamesHeaderStyle = p.HorizontalHeaderStyle.Top;
calendar.weekRangeSettings.generalFormat = "MMM-d";
calendar.weekRangeSettings.firstDayOfMonthFormat = "MMMM";
calendar.weekRangeSettings.titleSeparator = "  -  ";calendar.theme = "light";// render the calendar control
calendar.render();

Here is the result:

A weekRange view with custom header separator and formatting.

List View

The List view supports a main header, controlled by the ListSettings.headerStyle property, which can optionally display a title and/or navigation buttons. The title text is formatted by the titleFormat property. The display format of single day cells are set through the generalFormat, firstDayOfMonthFormat and firstDayOfYearFormat properties.

Timetable View

The Timetable view supports a main header, controlled by the TimetableSettings.headerStyle property, which can optionally display a title and/or navigation buttons. The title text is formatted by the titleFormat property. The navigation buttons scroll the view by the specified through the scrollStep property number of days.

The showDayHeader property specifies whether the view should display a separate set of item rows in the header, used for visualizing all-day items.

The appearance of the timeline header of the view can be customized via the format, groupHours, twelveHourFormat, showMinutes and showAM.

Resource View

The Resource view can display between 1 and 3 hotizontal timelines. The timelines’ appearance is customized through the corresponding instance of the TimelineSettings class e.g. topTimelineSettings, middleTimelineSettings and bottomTimelineSettings. All of them expose a unit, unitCount and format properties.