obout inc - ASP.NET Calendar - Tutorial

Tutorial - Client side functions

There are several client side functions available for you to use.

- You may handle a click event on client side.
- You may handle a mouse over/out event.
- You may handle left/right month scrolling event.
- You may format a date according to calendar formatting rules.
- You may change the visible month and selected date of the calendar.
- You may get the currently selected date of the calendar.
- You may clear the calendar selected date.
- You may disable the calendar when it's in date picker mode.
- You may select multiple dates.

Handling a click event on client side

1. Define the javascript function that will be called when a date is selected.
You must define this function before the calendar.

Calendar will pass 2 parameters: 1. calendar object and 2. selected date

2. Assign just the function name to OnClientDateChanged property

Example:

<script type="text/javascript">
function onDateChange(sender, selectedDate) {
alert("You've selected \n" + selectedDate.toString());
}
</script>

<obout:Calendar runat="server"
OnClientDateChanged="onDateChange">
</obout:Calendar>

Handling mouseover/mouseout date event

1. Define the javascript function that will be called when the mouse is over/out a date.
You must define this function before the calendar.

Calendar will pass 2 parameters: 1. calendar object and 2. date

2. Assign just the function name to OnClientDateMouseOver/OnClientDateMouseOut property

Example:

<script type="text/javascript">
function onDateOver(sender, selectedDate) {
        alert("You've moved the mouse over date \n" + selectedDate.toString());
}
function onDateOut(sender, selectedDate) {
        alert("You've moved the mouse out date \n" + selectedDate.toString());
}
</script>

<obout:Calendar runat="server"
         OnClientDateMouseOver="onDateOver"
         OnClientDateMouseOut="onDateOut">
</obout:Calendar>

Handling left/right month scrolling event

1. Define the javascript functions that will be called when month will scroll left/right.
You must define these functions before the calendar.

Calendar will pass 1 parameter, the calendar object.

2. Assign just the function name to OnClientMonthScrollLeft/OnClientMonthScrollRight property.

Example:

<script type="text/javascript">
function onScrollLeft(sender) {
        alert("You've scrolled the months to left");
}
function onScrollRight(sender) {
        alert("You've scrolled the months to right");
}
</script>

<obout:Calendar runat="server"
         OnClientMonthScrollLeft="onScrollLeft"
         OnClientMonthScrollRight="onScrollRight">
</obout:Calendar>

Formatting date

To format a date, you simply need to call formatDate(date, format) function on the calendar object, where date is a javascript Date object and format is a valid format string. See date format tutorial for available formats.

Example:

<script type="text/javascript">
function onDateChange(sender, selectedDate) {
        var formattedDate;
        formattedDate = sender.formatDate(selectedDate, "MMM dd, yyyy");

        alert("You've selected \n" + formattedDate);
}
</script>

<obout:Calendar runat="server"
OnClientDateChanged="onDateChange">
</obout:Calendar>

Setting a date

To set a new date, you may use setDate(firstMonth, selectedDate) property.

Example:

<obout:Calendar runat="server" id="myCal">
</obout:Calendar>

<a onclick="myCal.setDate(new Date(1982, 1, 1), new Date(1982, 1, 3));">
Click to set date to February 3, 1982
</a>

firstMonth argument is for specifying which month to display as first one.
selectedDate sets the selected date of the calendar.

Both arguments are optional and can be set to null.

Click to set date to February 3, 1982

Get the selected date

To get the selected date, you may use selectedDate property.

Example:

<obout:Calendar runat="server" id="myCal">
</obout:Calendar>

<a onclick="alert(myCal.selectedDate);">
Click to get the selected date
</a>

Get the selected date

Get the selected dates

To select multiple dates set MultiSelectedDates property to true.

Example:

<obout:Calendar runat="server" MultiSelectedDates="true" id="calMulti">
</obout:Calendar>

<a onclick="GetSelectedDates()" style="cursor:hand; cursor:pointer;"
Get the selected dates
</a>

<script language="javascript">

    function GetSelectedDates()
    {
        var selectedDates = calMulti.selectedDates;
        var selectedDatesString = ""
        for (i=0;i<selectedDates.length;i++)
        {
            selectedDatesString += "\n" + selectedDates[i];
        }
		
        alert("The selected dates are:\n" + selectedDatesString);
    }

</script>

Get the selected dates

Clear the calendar selected date

If you need to clear the current selected date simply call the method Clear.

Example:

<obout:Calendar runat="server" id="myCal">
</obout:Calendar>

<a onclick="myCal.Clear();">
Clear
</a>

Clear

Disabling calendar

Simply set enabled property to false if you need to disable the calendar.

Example:

<obout:Calendar runat="server" id="myCal">
</obout:Calendar>

<a onclick="myCal.enabled=false;">
Disable
</a>

<a onclick="myCal.enabled=true;">
Enable
</a>

Disable Enable

Please visit HOW-TO and Help page for any questions.

"I would like to thank the whole obout team for a great tool. Recently I have downloaded your tool and I believe that your controls are tremendous to work with. The usefulness and appearance is excellent."

Faruk Sikder

Spectrum Engineering Consortium Ltd.

Questions? Send email to support@obout.com | Contact Us