Calendar

The Calendar control represents a month calendar with header, footer and content. It provides the ability to display and select ranges of dates. 

Server side

Getting and setting the control's date

Use the Calendar.Date property to get or set the control's current date.

Getting and setting the selection

The range of selected dates in the Calendar control is stored in its Selection property. You can modify the control's selection by using the methods exposed by the List<T> class.

Customizing the control

Use the CalendarStyle property to specify whether the control should display its header, footer and/or navigation buttons.

The calendar control supports three different selection modes as specified in the SelectionMode enumeration.

Events

The following events are exposed by the Calendar class.

Event	Event arguments	Description
DateChanged	ValueChangedEventArgs<DateTime>	Raised when the control's date has changed.
SelectionChanged	ValueChangedEventArgs<List<DateTime>>	Raised when the control's selection has changed.

Client side

Getting a reference to the control

You can access the control on the client side by its ClientID.

JavaScript

var calendar = $find("Calendar1");
var calendar = $find("<%= Calendar1.ClientID %>");

Getting and setting the control's date

Use the get_date and set_date methods to get or set the control's date.

JavaScript

calendar.set_date(new Date(2012,0,12));
alert(calendar.get_date());

Getting and setting the selection

Use the getSelection method to retrieve the array with the selected dates in the Calendar. For setting the selection on the client side you can use the select and selectRange methods. The select method accepts as its parameter either a Date object or an Array of Date objects. The selectRange method facilitates range selection by accepting a start and end Date objects. Use the clearSelection method to clear the range of selected dates.

JavaScript

// selects the date cell corresponging to 10 June 2012
calendar.select(new Date(2012, 5, 20));
// selects the date cells corresponging to 10 June 2012 and 20 June 2012
calendar.select([new Date(2012, 5, 10), new Date(2012, 5, 20)]);
// selects the range between 10 June 2012 and 20 June 2012 inclusively 
calendar.selectRange(new Date(2012, 5, 10), new Date(2012, 5, 20));
// clears the selection
calendar.clearSelection();

Events

The following client-side event are exposed by the Calendar class.

Event	Event arguments	Script property	Description
dateChanged	ValueChangedEventArgs	DateChangedScript	Raised when the control's value has changed.
selectionChanging	ValueChangingEventArgs	SelectionChangingScript	Raised when the control's selection is about to be changed.
selectionChanged	ValueChangedEventArgs	SelectionChangedScript	Raised when the control's selection has changed.
dateClick	CellEventArgs	DateClickScript	Raised when a date cell in a Calendar control is clicked.
controlLoaded	-	ControlLoadedScript	Raised just after the control has finished loading and is ready for interaction.