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

Range Selection

Multi Month View with enabled AutoPostBack

September 2024 - October 2024
September 2024 - October 2024
September
September
xSMTWTFS
3525262728293031
361234567
37891011121314
3815161718192021
3922232425262728
40293012345
October
October
xSMTWTFS
40293012345
416789101112
4213141516171819
4320212223242526
44272829303112
453456789

Single Month View

September 2024
September 2024
xSMTWTFS
3525262728293031
361234567
37891011121314
3815161718192021
3922232425262728
40293012345


  • 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