Search
MonthRange 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 MonthRange view displays an arbitrary long sequence of months arranged in rows and columns. Each month represents a grid of day cells, each cell displays the day number and the schedule events set to occur on its respective date. The months in the view can be scrolled back or forth in time by using the navigation buttons in the view header.

In order to enable the MonthRange view, set the currentView property of the Calendar class to MonthRange. Use the monthRangeSettings and the monthSettings properties of the Calendar class to adjust the appearance of the view. The itemSettings property affects how schedule items will be displayed.

The following code sets the view of a calendar to MonthRange and adjusts some of the properties. 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 MonthRange, which displays several months in a grid calendar.currentView = p.CalendarView.MonthRange; calendar.monthRangeSettings.numberOfMonths = 6; calendar.monthRangeSettings.monthsPerRow = 3; //hide the navigation buttons calendar.monthRangeSettings.headerStyle = p.MainHeaderStyle.Title;

You can specify the total number of months displayed in the view, as well as their distribution by rows and columns by using the numberOfMonths, visibleRows and monthsPerRow properties of the MonthRangeSettings respectively.

The MonthRange view showing 2 monthes per row.

Use the headerStyle property of the MonthRangeSettings class to specify the appearance of the view's main header, and the headerStyle property of the MonthSettings class to specify the style of the month's individual headers.