Search
Calendar View and Settings
Introduction
General Information
What's New In This Release
Version History
Getting Started
Code Completion With VSDoc IntelliSense
Programming Interface Overview
Tutorials
Calendar View and Settings
Handling Events
CSS Styling
Serialization
Reference
Licensing
Online Resources
Technical Support
MindFusion Products

The calendar view is responsible for the type of schedule that is rendered: a single month, a block of months or weeks, a time table, a list or a table with resources.

You use the calendar.currentView property to set the view:

JavaScript Copy Code
calendar.currentView = p.CalendarView.MonthRange;

Each view has its own Settings object, a property of the Calendar instance, that lets you fine tune the schedule. Our calendar uses the CalendarView.SingleMonth view and we can customize it with the calendar.monthSettings property.

In the code below we customize the header to display both navigation buttons and text. Then we tell the calendar to render the full name of the days of the week. The leadingWeekCount property shows how many weeks from the previous month are rendered - in our case it is one. MonthSettings.showPaddingItems renders the items that are added to days from the previous or next month. Finally, we limit the appointments in a single day to 3 with the maxItems property:

JavaScript Copy Code
calendar.monthSettings.headerStyle = p.MainHeaderStyle.Buttons | p.MainHeaderStyle.Title; calendar.monthSettings.dayOfWeekFormat = p.DayOfWeekFormat.Full; calendar.monthSettings.leadingWeekCount = 1; calendar.monthSettings.showPaddingItems = true; calendar.monthSettings.maxItems = 3;

The users cannot create an appointment for the 4th time in the same cell. Here is the result:

Customized monthly calendar in JavaScript