Calendar Client Side Event| UI Control for ASP.NET AJAX, C#, VB.NET

Calendar Client Side Event in ASP.NET

Home > How to > Calendar Client Event

Kettic ASP.NET AJAX Calendar Library has been perfectly developed to allow users to create and set a variety of calendar controls, such as calendar elements settings, calendar features defining, calendar variable picker building up, calendar templates customizing, calendar style items specifications, as well as calendar client side event settings. This tutorial page mainly focuses on calendar client side events.

With the support of AJAX techniques, Kettic web Calendar controls support a set of client-side events that let you be capable of responding to user actions without a postback in a html. The embedded DateInput object that is used by DatePicker, TimePicker, and DateTimePicker also have a number of client events.

Overview of Calendar Client Side Events

We give following table list that contains various client side events in the asp.net calendar, and which controls users apply to:

OnInit: this even will occur when the calendar setup is finalized - at the end of the calendar constructor.
OnLoad: this even will happen when a page is loaded on the client.
OnDateSelecting: this even will occur immediately before the selected dates collection is updated to reflect the selection or de-selection of a date.
OnDateSelected: this even will occur rapidly as long as the value of the control's selection has been changed.
OnDateClick: this even will happen when the users click on a date in the calendar, no matter whether the date can be selected.
OnCalendarViewChanging: this even will occur when the calendar is changed to navigate to a new view, before the viewable area rendered by the calendar is changed.
OnCalendarViewChanged: this even will happen quickly as long as the calendar navigates to a new view.
OnRowHeaderClick: this even will arise when the users click on a calendar row header.
OnColumnHeaderClick: this even will occur when the users click on a calendar column header.
OnViewSelectorClick: this even will arise when the users click on the calendar view selector.

JavaScript Sample Codes for Client Side Events

We provide the most used javascript apis in the html client side, which are build in Kettic asp.net calendar control. The only thing you need is adding the customized operation and calling these methods, while the event listener is occurred, the web calendar graphs maybe redraw by your customized javascript code dynamically. And then, if necessary, the javascript maybe call the server side events by ajax.
This part is assigned to offer the demo javascript codes to users to write a javascript function that can be called when the event occurs.

Please check following detailed sample codes.


<script type="text/javascript">
functionlogEvent(content) {
vartxtLog = document.getElementById("ctl00_ContentPlaceHolderFunction_txtLog");
txtLog.value = txtLog.value + content + "\r\n";
}

functionCalendar_OnInit() {
logEvent("OnInit");
};

functionCalendar_OnLoad() {
logEvent("OnLoad");
};

functionCalendar_OnDateSelecting(calendarInstance, args) {
//set set_Cancel(true) to cancel the selection
logEvent("OnDateSelecting: " + args.get_renderDay().get_date(), (args.get_isSelecting() ? "Select" :"Unselect") + " " + args.get_renderDay().get_date() + "?");
};

functionCalendar_OnDateSelected(calendarInstance, args) {
logEvent("OnDateSelected: " + args.get_renderDay().get_date().toString() + " " + (args.get_renderDay().get_isSelected() ? "selected" :"unselected"));
};

functionCalendar_OnDateClick(calendarInstance, args) {
//set set_Cancel(true) to cancel AutoPostBackOnDayClick - if any;
logEvent("OnDateClick: " + args.get_renderDay().get_date(), "Postback?");
};

functionCalendar_OnCalendarViewChanging(calendarInstance, args) {
//set set_Cancel(true) to cancel
logEvent("OnCalendarViewChanging: " + args.get_step(), "Proceed?");
};

functionCalendar_OnCalendarViewChanged(calendarInstance, args) {
logEvent("OnCalendarViewChanged: " + args.get_step());
};

functionCalendar_OnRowHeaderClick(calendarInstance, args) {
logEvent("OnRowHeaderClick", "Proceed the selection of the row with index " + args.get_index() + "?");
}

functionCalendar_OnColumnHeaderClick(calendarInstance, args) {
logEvent("OnColumnHeaderClick", "Proceed the selection of the column with index " + args.get_index() + "?");
}

functionCalendar_OnViewSelectorClick(calendarInstance, args) {
logEvent("OnViewSelectorClick", "Preceed the selection of the view?");
}

</script>

More Related Calendar Server Programming Events

ASP.NET AJAX UI Controls

ASP.NET AJAX Chart UI Control ASP.NET AJAX Grid UI Control ASP.NET AJAX Barcode UI Control ASP.NET AJAX Button UI Control

ASP.NET AJAX Calendar UI Control

Overview Getting Started

Calendar element

Title Navigation Controls Column and Row Headers

Pickers

TimePicker DatePicker DateTimePicker MonthYearPicker Using shared Calendar/TimeView Formatting Values

Templates

Calendar Day Templates Calendar Header and Footer Temlates

Features

Customizing the Day Matrix Multi-View Mode Managing Dates Date Selection

Client Prpgramming

Calendar Event

Server Programming