RadCalendar for ASP.NET AJAX
Contents
RadControls for ASP.NET AJAX

The RadCalendar controls support a number of client-side events that let you respond to user actions without a postback. The following table lists the various client events, and which controls they apply to:

EventApplies toDescription
OnInitRadCalendarOccurs when the calendar setup is finalized (at the end of the calendar constructor).
OnLoadRadCalendarOccurs when a page is loaded on the client.
OnDayRenderRadCalendarOccurs immediately before a

calendar day cell is displayed when the calendar is rendered as a result of client-side navigation.

OnDateSelectingRadCalendarOccurs immediately before the selected dates collection is updated to reflect the selection or de-selection of a date.
OnDateSelectedRadCalendar, RadDatePicker, RadTimePicker, RadDateTimePicker, RadMonthYearPickerOccurs immediately after the value of the control's selection has been changed.
OnDateClickRadCalendarOccurs when the user clicks on a date in the calendar (regardless of whether the date can be selected).
OnCalendarViewChangingRadCalendarOccurs when the calendar navigates to a new view, before the viewable area rendered by the calendar is changed.
OnCalendarViewChangedRadCalendarOccurs immediately after the calendar navigates to a new view.
OnColumnHeaderClickRadCalendarOccurs when the user clicks on a column header.
OnRowHeaderClickRadCalendarOccurs when the user clicks on a row header.
OnViewSelectorClickRadCalendarOccurs when the user clicks on the view selector.
OnPopupOpeningRadDatePicker, RadTimePicker, RadDateTimePicker, RadMonthYearPickerOccurs immediately before a popup is displayed, before the selection in the popup is synchronized with the input area.
OnPopupClosingRadDatePicker, RadTimePicker, RadDateTimePicker, RadMonthYearPickerOccurs immediately before the a popup is closed.
OnClientTimeSelectedRadTimeViewOccurs when the user selects a time in the time view.
OnMonthSelectedRadMonthYearPickerOccurs when the user select month cell.
OnYearSelectedRadMonthYearPickerOccurs when the user select year cell.
OnViewChangedRadMonthYearPickerOccurs when the MonthYearView navigates to a new view, before the viewable area rendered by the MonthYearView is changed.
Note

The embedded RadDateInput object that is used by RadDatePicker, RadTimePicker, and RadDateTimePicker also has a number of client events. See the RadInput documentation for details.

To use these events, simply write a javascript function that can be called when the event occurs. Then assign the name of the javascript function as the value of the the corresponding property.

CopyASPX
<script type="text/javascript">
    function ClientTimeSelected(sender, e) {
        var oldTime = e.get_oldTime() ? (e.get_oldTime().localeFormat("h:mm tt")) : "";
        var newTime = e.get_newTime() ? (e.get_newTime().localeFormat("h:mm tt")) : "";
        var info = "OnClientTimeSelected: " + "oldTime- " + oldTime + ", newTime- " + newTime;
        alert(info);
    }
</script>
<telerik:RadTimePicker ID="RadTimePicker1" runat="server">
    <TimeView OnClientTimeSelected="ClientTimeSelected"></TimeView>
</telerik:RadTimePicker>

You can also assign event handlers in client-side code. When using the client-side API, pass a reference to the event handler rather than its name. One advantage of using the client-side API is that you can attach multiple event handlers to one event using the standard MS AJAX convention:

CopyJavaScript
<script type="text/javascript">
    function onDateClickHandler1()
    {
        alert("First handler called");
    }
    function onDateClickHandler2()
    {
        alert("Second handler called");
    }
    function pageLoad()
    {
        var calendar = $find(<%=RadCalendar1.ClientID%>);
        calendar.add_dateClick(onDateClickHandler1);
        calendar.add_dateClick(onDateClickHandler2);
    }
</script>

Another advantage of the client-side API is that you can detach an event handler dynamically:

CopyJavaScript
<script type="text/javascript">
    function removeDateClick2()
    {
        var calendar= $find(<%=RadCalendar1.ClientID%>);
        calendar.remove_dateClick(onDateClickHandler2);
    }
</script>

Note that on the client-side, the names of events are slightly different than on the server side. The following table shows the correspondence between client-side and server-side names:

Server-Side NameClient-SideNameMethods to add and Remove
OnInitinitadd_init, remove_init
OnLoadloadadd_load, remove_load
OnDayRenderdayRenderadd_dayRender, remove_dayRender
OnDateSelectingdateSelectingadd_dateSelecting, remove_dateSelecting
OnDateSelecteddateSelectedadd_dateSelected, remove_dateSelected
OnDateClickdateClickadd_dateClick, remove_dateClick
OnCalendarViewChangingcalendarViewChangingadd_calendarViewChanging, remove_calendarViewChanging
OnCalendarViewChangedcalendarViewChangedadd_calendarViewChanged, remove_calendarViewChanged
OnColumnHeaderClickcolumnHeaderClickadd_columnHeaderClick, remove_columnHeaderClick
OnRowHeaderClickrowHeaderClickadd_rowHeaderClick, remove_rowHeaderClick
OnViewSelectorClickviewSelectorClickadd_viewSelectorClick, remove_viewSelectorClick
OnPopupOpeningpopupOpeningadd_popupOpening, remove_popupOpening
OnPopupClosingpopupClosingadd_popupClosing, remove_popupClosing
OnClientTimeSelectingclientTimeSelectingadd_clientTimeSelecting, remove_clientTimeSelecting
OnClientTimeSelectedclientTimeSelectedadd_clientTimeSelected, remove_clientTimeSelected

See Also

Other Resources

Client-Side Basics