SingleMonth View

The SingleMonth view displays one month at a time and lets the user scroll to the previous or next month or the previous or next year by using the navigation buttons optionally displayed in the view header. The month represents a grid of day cells, which display the day number and the schedule events set to occur on the specific date.

In order to enable the SingleMonth view, set the currentView property of the Calendar class to SingleMonth. Use the monthSettings property of the Calendar class to set 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 SingleMonth 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.SingleMonth;
calendar.monthSettings.leadingWeekCount = 6;
calendar.monthSettings.trailingWeekCount = 1;
calendar.monthSettings.showPaddingItems = false;
//hide the navigation buttons
calendar.monthSettings.headerStyle = p.MainHeaderStyle.Title;

You can specify whether the view will display leading and trailing weeks by using the leadingWeekCount, trailingWeekCount and hideTrailingWeeks properties of the MonthSettings class. Those properties regulate how many of the full weeks from the next and previous months will be rendered. Visibility of padding days and items can be controlled through the showPaddingDays and showPaddingItems properties. The padding days are the days that are rendered from the previous and next month to make the first and last weeks full. The showPaddingItems property sets if the items of padding days are rendered at all. The maximum number of items displayed in a day cell can be limited by using the maxItems property.

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