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

Range Selection

Multi Month View with enabled AutoPostBack

May 2025 - June 2025
May 2025 - June 2025
May
May
xSMTWTFS
1827282930123
1945678910
2011121314151617
2118192021222324
2225262728293031
231234567
June
June
xSMTWTFS
2225262728293031
231234567
24891011121314
2515161718192021
2622232425262728
27293012345

Single Month View

May 2025
May 2025
xSMTWTFS
1827282930123
1945678910
2011121314151617
2118192021222324
2225262728293031
231234567


  • Demo Configurator
  • Multi Month View Configuration
  • Single Month View Configurator
This example demonstrates the ASP.NET AJAX Calendar 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
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ 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" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <script type="text/javascript" src="scripts.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadCodeBlock runat="server">
        <script type="text/javascript">
            function pageLoad() {
                demo.initialize($find("<%= RadCalendar1.ClientID %>"), $find("<%= StartDate.ClientID %>"), $find("<%= EndDate.ClientID %>"));
            }
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadCalendar2">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadCalendar2" UpdatePanelCssClass="" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="RadCalendar1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadCalendar1" UpdatePanelCssClass="" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadCalendar2" UpdatePanelCssClass="" />
                    <telerik:AjaxUpdatedControl ControlID="RadCalendar1" UpdatePanelCssClass="" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>

    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
    </telerik:RadAjaxLoadingPanel>

    <div class="demo-containers" runat="server" id="Div1">
        <div class="demo-container" runat="server" id="containerDiv">
            <div class="demo-container no-bg" style="max-width: 650px; padding-right: 30px;">
                <h2>Multi Month View with enabled AutoPostBack</h2>
                <telerik:RadCalendar RenderMode="Lightweight" runat="server" ID="RadCalendar2" AutoPostBack="true" MultiViewColumns="2"
                    MultiViewRows="1" RangeSelectionMode="OnKeyHold" EnableViewSelector="true">
                </telerik:RadCalendar>
            </div>

            <div class="demo-container no-bg" style="max-width: 350px; padding-right: 30px;">
                <h2>Single Month View</h2>
                <telerik:RadCalendar RenderMode="Lightweight" runat="server" ID="RadCalendar1" RangeSelectionMode="OnKeyHold"
                    EnableViewSelector="true">
                    <ClientEvents OnDateClick="demo.onDateClick"></ClientEvents>
                </telerik:RadCalendar>
            </div>
            <br />
        </div>
    </div>
    <br />
    <qsf:ConfiguratorPanel Expanded="true" runat="server" ID="ConfigurationPanel1" Title="Demo Configurator">
        <Views>
            <qsf:View Title="Multi Month View Configuration">

                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Size="Wide">
                    <ul class="fb-group">
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox AutoPostBack="true" ButtonType="ToggleButton" runat="server" Checked="true" OnCheckedChanged="RadioButton1_CheckedChanged"
                                    Text="Allow range selection by pressing [Shift] key and clicking on the date."
                                    ID="RadioButton1" GroupName="SingleCalendar"></asp:CheckBox>
                            </span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox AutoPostBack="true" runat="server" OnCheckedChanged="RadioButton2_CheckedChanged"
                                    Text="Allow range selection by clicking consecutively two dates." ID="RadioButton2"
                                    GroupName="SingleCalendar"></asp:CheckBox>
                            </span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>

                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:DatePicker runat="server" Label="Start Date:" ID="RadDatePicker1">
                            </qsf:DatePicker>
                        </li>
                        <li>
                            <qsf:DatePicker runat="server" Label="End Date:" ID="RadDatePicker2">
                            </qsf:DatePicker>
                        </li>
                        <li>
                            <qsf:Button runat="server" ID="Button1" Text="Set range" OnClick="Button1_Click"></qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
            <qsf:View Title="Single Month View Configurator">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Wide">
                    <ul class="fb-group">
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox 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"></asp:CheckBox>
                            </span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox AutoPostBack="true" runat="server" OnCheckedChanged="RadioButton4_CheckedChanged"
                                    Text="Allow range selection by clicking consecutively two dates." ID="RadioButton4"
                                    GroupName="MultiCalendar"></asp:CheckBox>
                            </span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:DatePicker AutoPostBack="false" runat="server" Label="Start Date:" ID="StartDate">
                            </qsf:DatePicker>
                        </li>
                        <li>
                            <qsf:DatePicker runat="server" AutoPostBack="false" Label="End Date:" ID="EndDate">
                            </qsf:DatePicker>
                        </li>
                        <li>
                            <qsf:Button runat="server" AutoPostBack="false" ID="Button2" Text="Set range" OnClientClicked="demo.setRanage"></qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance