Calendar - Client-Side API

June, 2009

Demo Configurator

  • MIN/MAX DATE
    MinDate
  • MaxDate
Single Date Selection





Multi Date Selection





Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

Telerik RadCalendar exposes rich client-side API set which allows easy and flexible use in a wide range of application scenarios.

In this example we demonstrate the main client-side functions:

  • selectDate(date, navigate) - Takes a triplet representation of a date, and if valid selects it in the calendar. The second boolean parameter denotes whether the calendar should navigate visually to the selected date. You have to use the true value as an input, if false is used the date will be selected but the calendar won't change its visual state.
  • selectDates(dates, navigate) - Takes an array of triplets representing dates and if valid selects them in the calendar. The second boolean parameter denotes whether the calendar should navigate visually to the selected date. One must use true value as an input, if false is used the date will be selected but the calendar won't change its visual state.
  • unselectDate(date) - Takes a triplet representation of a date and if valid deselects it in the calendar.
  • unselectDates(dates) - Takes an array of triplets representing dates and if valid deselects them in the calendar.
  • get_selectedDates( ) - Returns an array of date triplets, representing the selected dates contained in the calendar.
  • get_rangeMinDate( ) - Returns an array of date triplets, representing the RangeMinDate of the calendar.
  • set_rangeMinDate(date) - Takes an array of triplets representing the date and if valid set the RangeMinDate to it.
  • get_rangeMaxDate( ) - Returns an array of date triplets, representing the RangeMaxDate of the calendar.
  • set_rangeMaxDate(date) - Takes an array of triplets representing the date and if valid set the RangeMaxDate to it.

All client-side functions that take or return date values use a custom interchange format for transferring dates. The format (due to javascript's Date object regarding calendars different than Gregorian) is as follows: [2005, 11, 15]. This is a triplet array where the first position is the year, the second is the month and the third is the day.

The selected dates array returned by some functions is an array, where every cell of is a date representation triplet. This representation looks like this:

[ [2005, 11, 15], [2005, 11, 16], [2005, 11, 17] ]

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" Inherits="Telerik.Web.Examples.Calendar.Programming.ClientSideAPI.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadCalendar1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadCalendar1" LoadingPanelID="radAjaxdLoadingPanel1"
                        UpdatePanelCssClass="" />
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" UpdatePanelCssClass="" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadCalendar1" LoadingPanelID="radAjaxdLoadingPanel1"
                        UpdatePanelCssClass="" />
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" UpdatePanelCssClass="" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="radAjaxdLoadingPanel1">
    </telerik:RadAjaxLoadingPanel>
    <div class="demo-containers">
        <div class="demo-container" runat="server" id="containerDiv">
            <telerik:RadCalendar RenderMode="Lightweight" ID="RadCalendar1" FocusedDate="2009-06-01" runat="server">
            </telerik:RadCalendar>
        </div>
    </div>
    <telerik:RadScriptBlock runat="server">
        <script type="text/javascript">
            function pageLoad() {
                demo.initialize($find("<%= RadCalendar1.ClientID %>"), $get("<%= MultiDatesList.ClientID %>"), $get("<%= SingleDatesList.ClientID %>"));

            }
        </script>
    </telerik:RadScriptBlock>
    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server" Expanded="true">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" Size="Narrow" runat="server">
                    <ul class="fb-group">
                        <li><span class="checkbox">
                            <asp:CheckBox ID="MultiSelectCheckBox" runat="server" AutoPostBack="True" Text="Enable Multiselect"
                                OnCheckedChanged="MultiSelectCheckBox_CheckedChanged"></asp:CheckBox></span>
                        </li>

                        <li>
                            <fieldset><legend>MIN/MAX DATE</legend></fieldset>
                            <span class="checkbox">
                                <asp:CheckBox runat="server" ID="MinDate" Text="2005/01/01" onclick="demo.setMinDate(this);"></asp:CheckBox></span>MinDate </li>
                        <li><span class="checkbox">
                            <asp:CheckBox runat="server" ID="MaxDate" Text="2012/01/01" onclick="demo.setMaxDate(this);"></asp:CheckBox></span>MaxDate </li>

                        <li>
                            <qsf:Button OnClientClicked="demo.ClearAll" runat="server" Text="Clear all selected dates" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Narrow" Title="Single Date Selection">
                    <ul class="fb-group">
                        <li>
                            <qsf:RadioButtonList ID="SingleDatesList" runat="server">
                            </qsf:RadioButtonList>
                        </li>
                        <li>
                            <qsf:Button ID="SingleSelect" runat="server" AutoPostBack="false" OnClientClicked="demo.PerformSingleSelectionChange"
                                Text="Select" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Narrow" Title="Multi Date Selection">
                    <ul class="fb-group">
                        <li>
                            <qsf:CheckBoxList ID="MultiDatesList" runat="server">
                            </qsf:CheckBoxList>
                        </li>
                        <li>
                            <qsf:Button ID="MultiSelect" runat="server" OnClientClicked="demo.PerformMultiSelectionChange"
                                Text="Select" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?