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

Client-Side API

June 2009
June 2009
 SMTWTFS
2331123456
2478910111213
2514151617181920
2621222324252627
272829301234
28567891011
  • Demo Configurator
  • MIN/MAX DATE
    MinDate
  • MaxDate
Single Date Selection
Multi Date Selection

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>
<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>

Support & Learning Resources

Find Assistance