Search
Timetable View
Introduction
General Information
What's New In This Release
Version History
Getting Started
Code Completion With VSDoc IntelliSense
Programming Interface Overview
The Schedule
Calendar Views
List View
MonthRange View
Resource View
SingleMonth View
Timetable View
WeekRange View
Grouping
Customizing Appearance
Events
Built-in Forms
Localization
Tutorials
Reference
Licensing
Online Resources
Technical Support
MindFusion Products

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 Copy Code
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.