New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Events Overview

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:

Event Description
OnInit Occurs when the calendar setup is finalized (at the end of the calendar constructor).
OnLoad Occurs when a page is loaded on the client.
OnDayRender Occurs immediately before acalendar day cell is displayed when the calendar is rendered as a result of client-side navigation.
OnDateSelecting Occurs immediately before the selected dates collection is updated to reflect the selection or de-selection of a date.
OnDateSelected Occurs immediately after the value of the control's selection has been changed.
OnDateClick Occurs when the user clicks on a date in the calendar (regardless of whether the date can be selected).
OnCalendarViewChanging Occurs when the calendar navigates to a new view, before the viewable area rendered by the calendar is changed.
OnCalendarViewChanged Occurs immediately after the calendar navigates to a new view.
OnColumnHeaderClick Occurs when the user clicks on a column header.
OnRowHeaderClick Occurs when the user clicks on a row header.
OnViewSelectorClick Occurs when the user clicks on the view selector.

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.

<telerik:RadTimePicker RenderMode="Lightweight" ID="RadTimePicker1" runat="server">
    <TimeView OnClientTimeSelected="clientTimeSelected"></TimeView>
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;


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:

function onDateClickHandler1()
    alert("First handler called");
function onDateClickHandler2()
    alert("Second handler called");
function pageLoad()
    var calendar = $find(<%=RadCalendar1.ClientID%>);

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

function removeDateClick2()
    var calendar= $find(<%=RadCalendar1.ClientID%>);

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 Name Client-SideName Methods to add and Remove
OnInit init add_init, remove_init
OnLoad load add_load, remove_load
OnDayRender dayRender add_dayRender, remove_dayRender
OnDateSelecting dateSelecting add_dateSelecting, remove_dateSelecting
OnDateSelected dateSelected add_dateSelected, remove_dateSelected
OnDateClick dateClick add_dateClick, remove_dateClick
OnCalendarViewChanging calendarViewChanging add_calendarViewChanging, remove_calendarViewChanging
OnCalendarViewChanged calendarViewChanged add_calendarViewChanged, remove_calendarViewChanged
OnColumnHeaderClick columnHeaderClick add_columnHeaderClick, remove_columnHeaderClick
OnRowHeaderClick rowHeaderClick add_rowHeaderClick, remove_rowHeaderClick
OnViewSelectorClick viewSelectorClick add_viewSelectorClick, remove_viewSelectorClick
OnPopupOpening popupOpening add_popupOpening, remove_popupOpening
OnPopupClosing popupClosing add_popupClosing, remove_popupClosing
OnClientTimeSelecting clientTimeSelecting add_clientTimeSelecting, remove_clientTimeSelecting
OnClientTimeSelected clientTimeSelected add_clientTimeSelected, remove_clientTimeSelected

See Also

In this article