Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Calendar / Client-side API

Configurator
Enable Multiselect

Single Date Selection


Multi Date Selection
Set min/max dateMinDate:
MaxDate:

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

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ 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" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ 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">
        <qsf:HeadTag ID="Headtag1" runat="server"></qsf:HeadTag>
    </head>
    <body class="BODY">
        <form id="mainForm" method="post" runat="server">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="CS"></qsf:Header>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script type="text/javascript">    
           //<![CDATA[
                function PerformSingleSelectionChange(shouldSelect)
                {
                    var datesList = document.getElementById("SingleDatesList");
                    var dates = datesList.getElementsByTagName("input");

                    var selectedDate = null;
                    for (var i = 0; i < dates.length; i++)
                    {
                        if (dates[i].type == "radio" && dates[i].checked)
                        {
                            selectedDate = dates[i].value.split('/');
                            break;
                        }
                    }

                    if (selectedDate == null)
                    {
                        return;
                    }

                    var shouldNavigate = (document.getElementById("shouldNavigate").checked == true);
                    var calendar = $find("<%= RadCalendar1.ClientID %>");
                    if (shouldSelect == true)
                    {
                        calendar.selectDate(selectedDate, shouldNavigate);
                    }
                    else
                    {
                        calendar.unselectDate(selectedDate);
                    }
                }

                function PerformMultiSelectionChange(shouldSelect)
                {
                    var datesList = document.getElementById("MultiDatesList");
                    var dates = datesList.getElementsByTagName("label");

                    var selectedDates = [];
                    for (var i = 0; i < dates.length; i++)
                    {
                        var checkbox = document.getElementById(dates[i].htmlFor);
                        if (checkbox != null && checkbox.checked)
                        {
                            var stringDate = dates[i].firstChild.nodeValue;
                            selectedDates[selectedDates.length] = stringDate.split('/');
                        }
                    }

                    if (selectedDates.length == 0)
                    {
                        return;
                    }

                    var shouldNavigate = (document.getElementById("shouldNavigate").checked == true);
                    var calendar = $find("<%= RadCalendar1.ClientID %>");
                    if (shouldSelect == true)
                    {
                        calendar.selectDates(selectedDates, shouldNavigate);
                    }
                    else
                    {
                        calendar.unselectDates(selectedDates);
                    }
                }

                function ClearAll()
                {
                    var calendar = $find("<%= RadCalendar1.ClientID %>");
                    calendar.unselectDates(calendar.get_selectedDates());
                    var datesList = document.getElementById("MultiDatesList");
                    var dates = datesList.getElementsByTagName("input");

                    for (var resetCounter = 0; resetCounter < dates.length; resetCounter++)
                    {
                        dates[resetCounter].checked = false;
                    }
                }

                function setMinDate(minDate)
                {
                    var calendar = $find("<%= RadCalendar1.ClientID %>");
                    if (minDate.checked)
                    {
                        var newMinDateArray = [2005, 1, 1];
                        calendar.set_rangeMinDate(newMinDateArray);
                    }
                    else
                    {
                        var newMinDateArray = [1900, 1, 1];
                        calendar.set_rangeMinDate(newMinDateArray);
                    }
                }

                function setMaxDate(maxDate)
                {
                    var calendar = $find("<%= RadCalendar1.ClientID %>");
                    if (maxDate.checked)
                    {
                        var newMaxDateArray = [2012, 1, 1];
                        calendar.set_rangeMaxDate(newMaxDateArray);
                    }
                    else
                    {
                        var newMaxDateArray = [2050, 1, 1];
                        calendar.set_rangeMaxDate(newMaxDateArray);
                    }
                }
        
            //]]>
            </script>
        </telerik:RadCodeBlock>
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="MultiSelectCheckBox">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadCalendar1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <div>
            <telerik:RadCalendar ID="RadCalendar1" FocusedDate="2009-06-01" runat="server">
            </telerik:RadCalendar>
            <br />
            <br />
            <br />
        </div>
        <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Configurator"
            Orientation="Horizontal" Expanded="true">
            <table>
                <tr>
                    <td>
                        <asp:CheckBox ID="MultiSelectCheckBox" runat="server" AutoPostBack="True" OnCheckedChanged="MultiSelectCheckBox_CheckedChanged" />
                        <asp:Label ID="MultiSelectLabel" runat="server" Text="Enable Multiselect" /><br />
                        <input type="checkbox" id="shouldNavigate" checked="checked"></input>
                        <label for="shouldNavigate">
                            Navigate on selection</label>
                        <br />
                        <fieldset style="width: 180px;">
                            <legend>Single Date Selection</legend>
                            <asp:RadioButtonList ID="SingleDatesList" runat="server" RepeatColumns="2" RepeatDirection="Horizontal">
                            </asp:RadioButtonList>
                            <button type="button" id="SingleSelect" style="margin-top: 10px; margin-right: 2px;"
                                onclick="PerformSingleSelectionChange(true);">
                                Select</button>
                        </fieldset>
                        <br />
                        <button type="button" onclick="ClearAll();" style="width: 180px; margin-top: 5px;">
                            Clear all selected dates</button>
                        <br />
                    </td>
                    <td>
                        <fieldset style="width: 180px;">
                            <legend>Multi Date Selection</legend>
                            <asp:CheckBoxList ID="MultiDatesList" runat="server" RepeatColumns="2" RepeatDirection="Horizontal">
                            </asp:CheckBoxList>
                            <button type="button" id="MultiSelect" style="margin-top: 10px; margin-right: 2px;"
                                onclick="PerformMultiSelectionChange(true);">
                                Select</button>
                            <button type="button" id="MultiUnselect" style="margin-top: 10px" onclick="PerformMultiSelectionChange(false);">
                                Unselect</button>
                        </fieldset>
                        <fieldset>
    <legend>Set min/max date</legend>MinDate:<asp:CheckBox runat="server" ID="MinDate"
    Text="2005/01/01" onclick="setMinDate(this);" />
                            <br />
                            MaxDate:<asp:CheckBox runat="server" ID="MaxDate" Text="2012/01/01" onclick="setMaxDate(this);" />
                        </fieldset>
                    </td>
                </tr>
            </table>
        </qsf:ConfiguratorPanel>
        <qsf:Footer ID="Footer1" runat="server"></qsf:Footer>
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451