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

Range Selection

Multi Month View with enabled AutoPostBack

April 2024 - May 2024
April 2024 - May 2024
April
April
xSMTWTFS
1431123456
1578910111213
1614151617181920
1721222324252627
182829301234
19567891011
May
May
xSMTWTFS
182829301234
19567891011
2012131415161718
2119202122232425
222627282930311
232345678

Single Month View

April 2024
April 2024
xSMTWTFS
1431123456
1578910111213
1614151617181920
1721222324252627
182829301234
19567891011


  • Demo Configurator
  • Multi Month View Configuration
  • Single Month View Configurator
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
  • 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