Timetable View

Set the currentView property of the Calendar class to Timetable to select the timetable view. This view displays the allotment of resources to distinct hours of a day; the columns in this view represent dates, tasks, locations, contacts or resources. The columns can be grouped by location, task, contact or resource. Each row represents an hour or a custom time interval. The cells in the view display information about the schedule items allocated to the task, contact, location or resource for the specific time interval.

The Timetable view supports two different layouts, specified in the TimetableSettings.orientation property. The vertical layout (Orientation.Vertical) displays dates and resources as columns, and the horizontal layout (Orientation.Horizontal) - as rows.

The following code creates a calendar and sets its current view to Timetable. It uses the timetableSettings property to customize the schedule. The code assumes you have initialized a <div> element with id “calendar” in a web page that references the JavaScript file, which contains this code:

JavaScript

var p = MindFusion.Scheduling;// create a new instance of the calendar 
this.calendar = new p.Calendar(document.getElementById("calendar"));// set the view to Timetable
calendar.currentView = p.CalendarView.Timetable;
calendar.timetableSettings.headerStyle = p.MainHeaderStyle.Title;
calendar.timetableSettings.orientation = p.Orientation.Vertical;
calendar.timetableSettings.titleFormat = calendar.formatInfo.dateFormats.shortDate;

Use the timetableSettings property of the Calendar class to set the appearance of the timetable view. The itemSettings property lets you specify how schedule items should be displayed.

A daily Timetable with the 'standard' theme.

You can specify the resolution of the view via the cellTime property, which represents the time length of a single cell, accurate to the nearest second. The display size of the cells can be controlled through the cellSize property, which specifies the cell width or height in pixels.

The appearance of the view’s timeline can be modified by using the groupHours, twelveHourFormat, showMinutes and showAM properties of the TimetableSettings class.

The Timetable view can be grouped by location, task, contact or resource to display a separate row or column for each resource. The reverseGrouping property specifies the order of grouping.