Calendar - Range Selection

Multi Month View with enabled AutoPostBack

December, 2016 - January, 2017
December, 2016 - January, 2017
December
December
xSMTWTFS
4927282930123
5045678910
5111121314151617
5218192021222324
5325262728293031
11234567
January
January
xSMTWTFS
5325262728293031
11234567
2891011121314
315161718192021
422232425262728
52930311234

Single Month View

December, 2016


Demo Configurator

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB
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 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">
    <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>

Find Assistance

Help Us Improve

Was this example helpful?