Search
WeekRange 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

The WeekRange view displays a range of weeks. Each week occupies a whole row whose cells represent days. The day cells display the day name or number according to the generalFormat, firstDayOfMonthFormat and firstDayOfYearFormat properties of the WeekRangeSettings class, and the schedule items set to occur on the corresponding date.

In order to enable the WeekRange view, set the currentView property of the Calendar class to WeekRange. Use the weekRangeSettings property of the Calendar class to adjust the appearance of the view. The ItemSettings property lets you specify how schedule items should be displayed.

The following code renders a single week at a time in the calendar with a WeekRange view using a WeekRangeSettings instance. 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 calendar = new p.Calendar(document.getElementById("calendar")); // set the view to WeekRange calendar.currentView = p.CalendarView.WeekRange; // renders a single week calendar.weekRangeSettings.weekStyle = p.WeekRangeViewStyle.SingleWeek; calendar.weekRangeSettings.headerStyle = p.HorizontalHeaderStyle.None; calendar.weekRangeSettings.visibleRows = 5;

The WeekRange view supports two different layouts, specified in the WeekRangeSettings.viewStyle property. WeekPerRow is the default view, where each week occupies a whole row whose cells represent days. SingleWeek view provides a more detailed look, where the days of the week are divided into two columns and four rows.

A calendar with the WeekRange view and the 'light' theme.