Client-side Programming Overview
The RadCalendar control provides a flexible client-side API. You can easily interact with the controls in the browser using their client-side objects. In addition to a variety of client-side events, the client-side object model lets you achieve various tasks while avoiding unnecessary post-backs.
Getting the client-side object
All the API methods are accessible via the registered JavaScript objects for each control. The following code snippet shows how to get reference of the client-side object of RadCalendar:
<telerik:RadCalendar ID="RadCalendar1" runat="server"></telerik:RadCalendar>
<telerik:RadPushButton runat="server" ID="RadButton1" Text="Clear the Calendar" OnClientClicked="getClientReference" AutoPostBack="false" />
<script type="text/javascript">
function getClientReference() {
var calendar = $find("<%= RadCalendar1.ClientID %>");
alert(calendar.get_id()); //returns the element ID
alert(calendar.get_element()); //returns a reference to the HTML wrapper
}
</script>
You can find more detailed instructions of how to get client reference to a Telerik AJAX control on Get Client-side Reference to a Control Object.
Getting and setting the selected date
The RadCalendar client object represents dates as triplets. Each triplet is an array of three integer values, which specify the year, month, and day of a date, in that order.
To get the selected date or dates on a RadCalendar control, use the get_selectedDates() method. This methods returns an array. If no date is selected, the array has length 0. If the calendar does not support multi-select mode, then the array has at most one element. Each date in the array is a triplet:
<telerik:RadCalendar ID="RadCalendar1" runat="server"></telerik:RadCalendar>
<telerik:RadPushButton runat="server" ID="RadButton1" Text="Unselect the dates before 2025" OnClientClicked="unselectDates" AutoPostBack="false" />
<script>
function unselectDates(sender, args) {
var calendar = $find("<%= RadCalendar1.ClientID %>");
var dates = calendar.get_selectedDates();
for (var i = 0; i < dates.length; i++)
{
var date = dates[i];
var year = date[0];
var month = date[1];
var day = date[2];
if (year < 2025)
calendar.unselectDate(date);
}
}
</script>
To set the selected date on a RadCalendar control, use the selectDate() or selectDates() method:
<telerik:RadCalendar ID="RadCalendar1" runat="server"></telerik:RadCalendar>
<telerik:RadPushButton runat="server" ID="RadButton1" Text="Select Today And Tomorrow" OnClientClicked="selectTodayAndTomorrow" AutoPostBack="false" />
<script>
function selectTodayAndTomorrow() {
var todaysDate = new Date();
var todayTriplet = [todaysDate.getFullYear(), todaysDate.getMonth() + 1, todaysDate.getDate()];
var tomorrowTriplet = [todaysDate.getFullYear(), todaysDate.getMonth() + 1, todaysDate.getDate() + 1];
var selectedDates = [todayTriplet, tomorrowTriplet];
var calendar = $find("<%=RadCalendar1.ClientID%>");
calendar.selectDates(selectedDates, true);
}
</script>
Getting and setting minimum and maximum values
The following methods get or set the minimum and maximum values:
| Method | Supported By | Description |
|---|---|---|
| get_rangeMinDate() | RadCalendar | Returns the triplet for the minimum date that the user can select. |
| set_rangeMinDate(triplet) | RadCalendar | Sets the minimum date to the date represented by a triplet. |
| get_rangeMaxDate() | RadCalendar | Returns the triplet for the maximum date that the user can select. |
| set_rangeMaxDate(triplet) | RadCalendar | Sets the maximum date to the date represented by a triplet. |
Clearing selected values
On RadCalendar you can unselect individual dates using the unselectDate or unselectDates method:
<telerik:RadCalendar ID="RadCalendar1" runat="server"></telerik:RadCalendar>
<telerik:RadPushButton runat="server" ID="RadButton1" Text="Clear the Calendar" OnClientClicked="clearCalendar" AutoPostBack="false" />
<script type="text/javascript">
function clearCalendar() {
var calendar = $find("<%= RadCalendar1.ClientID %>");
var dates = calendar.get_selectedDates();
calendar.unselectDates(dates);
}
</script>