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 / Range Selection

Single Month View

Configurator

Start Date: - End Date:


Multi Month View with enabled AutoPostBack

Configurator

Start Date: - End Date:


  • This example demonstrates the range selection between dates. To enable range selection feature you need to set the RangeSelectionMode property to one of the following values:
    • OnKeyHold - Allow range selection by pressing [Shift] key and clicking on the date.
    • ConsecutiveClicks - Allow range selection by clicking consecutively two dates.
    By default the RangeSelectionMode property is set to None which does not allow range selection.

    The range selection Start/End dates are available:
    • On client through RadCalendar.get_rangeSelectionStartDate() and RadCalendar.get_rangeSelectionEndDate() functions
    • On server through RadCalendar.RangeSelectionStartDate and RadCalendar.RangeSelectionEndDate properties

    You could set dates in range programmatically by using:
    • RadCalendar.RangeSelectionStartDate and RadCalendar.RangeSelectionEndDate properties server side
    • RadCalendar.set_datesInRange(startDate, endDate) function client side

    Please note that when the dates in range are selected any other date selection will unselect all dates from range selection

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page CodeFile="DefaultCS.aspx.cs" Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Calendar.Functionality.MultiMonthView.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 runat="server" ID="Headtag1"></qsf:HeadTag>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="CS"></qsf:Header>
        <telerik:RadScriptManager ID="RadScriptManager" runat="server" />
        <telerik:RadCodeBlock runat="server">
            <script type="text/javascript">
                function onDateClick(sender, eventArgs)
                {
                    var radCalendar1 = $find("<%=RadCalendar1.ClientID %>");
                    var startDate = radCalendar1.get_rangeSelectionStartDate();
                    var endDate = radCalendar1.get_rangeSelectionEndDate()
                    if (endDate && startDate)
                    {
                        var startDatePicker = $find("<%=StartDate.ClientID %>");
                        startDatePicker.set_selectedDate(startDate);
                        var endDatePicker = $find("<%=EndDate.ClientID %>");
                        endDatePicker.set_selectedDate(endDate);
                    }
                    else
                    {
                        var startDatePicker = $find("<%=StartDate.ClientID %>");
                        startDatePicker.clear();
                        var endDatePicker = $find("<%=EndDate.ClientID %>");
                        endDatePicker.clear();
                    }
                }

                function setRanage()
                {
                    var startDatePicker = $find("<%=StartDate.ClientID %>");
                    var startDate = startDatePicker.get_selectedDate();
                    var endDatePicker = $find("<%=EndDate.ClientID %>");
                    var endDate = endDatePicker.get_selectedDate();
                    var radCalendar1 = $find("<%=RadCalendar1.ClientID %>");

                    radCalendar1.set_datesInRange(startDate, endDate);
                }
            </script>
        </telerik:RadCodeBlock>
        <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>
        <h3 class="qsfSubtitle">
            Single Month View</h3>
        <telerik:RadAjaxPanel runat="server" ID="RadAjaxpanel2" LoadingPanelID="RadAjaxLoadingPanel1">
            <qsf:ConfiguratorPanel Expanded="true" runat="server" ID="ConfigurationPanel1" Title="Configurator">
                <table>
                    <tr>
                        <td>
    <asp:RadioButton AutoPostBack="true" runat="server" Checked="true" OnCheckedChanged="RadioButton1_CheckedChanged"
    Text="Allow range selection by pressing [Shift] key and clicking on the date."
    ID="RadioButton1" GroupName="SingleCalendar" />
                        </td>
                        <td>
    <asp:RadioButton AutoPostBack="true" runat="server" OnCheckedChanged="RadioButton2_CheckedChanged"
    Text="Allow range selection by clicking consecutively two dates." ID="RadioButton2"
    GroupName="SingleCalendar" />
                        </td>
                    </tr>
                </table>
            </qsf:ConfiguratorPanel>
            <telerik:RadCalendar runat="server" ID="RadCalendar1" RangeSelectionMode="OnKeyHold"
                EnableViewSelector="true">
                <ClientEvents OnDateClick="onDateClick" />
            </telerik:RadCalendar>
            <br />
            <asp:Label runat="server" Text="Start Date: "></asp:Label>
            <telerik:RadDatePicker runat="server" ID="StartDate">
            </telerik:RadDatePicker>
            -
            <asp:Label ID="Label1" runat="server" Text="End Date: "></asp:Label>
            <telerik:RadDatePicker runat="server" ID="EndDate">
            </telerik:RadDatePicker>
    <asp:Button runat="server" CssClass="qsfButtonBig" ID="Button2" Text="Set range"
    OnClientClick="setRanage(); return false;" />
            <br />
            <br />
        </telerik:RadAjaxPanel>
        <br />
        <h3 class="qsfSubtitle">
            Multi Month View with enabled AutoPostBack</h3>
        <telerik:RadAjaxPanel runat="server" ID="RadAjaxpanel1" LoadingPanelID="RadAjaxLoadingPanel1">
            <qsf:ConfiguratorPanel Expanded="true" runat="server" ID="ConfiguratorPanel1" Title="Configurator">
                <table>
                    <tr>
                        <td>
    <asp:RadioButton AutoPostBack="true" runat="server" Checked="true" OnCheckedChanged="RadioButton3_CheckedChanged"
    Text="Allow range selection by pressing [Shift] key and clicking on the date."
    ID="RadioButton3" GroupName="MultiCalendar" />
                        </td>
                        <td>
    <asp:RadioButton AutoPostBack="true" runat="server" OnCheckedChanged="RadioButton4_CheckedChanged"
    Text="Allow range selection by clicking consecutively two dates." ID="RadioButton4"
    GroupName="MultiCalendar" />
                        </td>
                    </tr>
                </table>
            </qsf:ConfiguratorPanel>
            <telerik:RadCalendar runat="server" ID="RadCalendar2" AutoPostBack="true" MultiViewColumns="2"
                MultiViewRows="1" RangeSelectionMode="OnKeyHold" EnableViewSelector="true">
            </telerik:RadCalendar>
            <br />
            <asp:Label ID="Label2" runat="server" Text="Start Date: "></asp:Label>
            <telerik:RadDatePicker runat="server" ID="RadDatePicker1">
            </telerik:RadDatePicker>
            -
            <asp:Label ID="Label3" runat="server" Text="End Date: "></asp:Label>
            <telerik:RadDatePicker runat="server" ID="RadDatePicker2">
            </telerik:RadDatePicker>
    <asp:Button runat="server" CssClass="qsfButtonBig" ID="Button1" Text="Set range"
    OnClick="Button1_Click" />
            <br />
            <br />
        </telerik:RadAjaxPanel>
        <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