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

Range Selection

Multi Month View with enabled AutoPostBack

November 2025 - December 2025
November 2025 - December 2025
November
November
xSMTWTFS
442627282930311
452345678
469101112131415
4716171819202122
4823242526272829
4930123456
December
December
xSMTWTFS
4930123456
5078910111213
5114151617181920
5221222324252627
5328293031123
245678910

Single Month View

November 2025
November 2025
xSMTWTFS
442627282930311
452345678
469101112131415
4716171819202122
4823242526272829
4930123456


  • 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
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
<%@ Page CodeFile="DefaultVB.aspx.vb" Language="vb" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Calendar.Functionality.MultiMonthView.DefaultVB" %>

<%@ 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"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadCodeBlock ID="RadCodeBlock1" 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