Search
SingleMonth 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 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 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.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.