MonthRange View

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

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.