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

SharedCalendar



 



 
Having many date pickers on a page might render too much HTML and impact performance. RadDatePicker instances can share a RadCalendar control and use it to pick dates.

There are two ways to configure the calendar control:
  • by setting its ID to the RadDatePicker.SharedCalendarID property. That can be done in the VS.NET designer.
  • by passing a reference of the control to the RadDatePicker.SharedCalendar property. Available to the code-behind logic only.

This example page has four date pickers. The "static" ones have their SharedCalendarID property pointing at the "sharedCalendar" RadCalendar instance. The "dynamic" pickers are configured in the code-behind. The Page_Load event handler creates a new RadCalendar control and sets a reference to it to the pickers' SharedCalendar properties.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page CodeFile="DefaultVB.aspx.vb" Language="vb" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Calendar.Examples.Design.Sunny.DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="Stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div id="Div1" class="demo-containers" runat="server">
        <div class="demo-container" style="padding-right: 30px;">
            <table>
                <tr>
                    <td colspan="2">
                        <label>
                            <h3>Static shared calendar:</h3>
                        </label>
                    </td>
                </tr>
                <tr>
                    <td class="halfWidth">
                        <label runat="server" id="LabelRadDatePicker1">
                            Departure
                        </label>
                    </td>
                    <td class="halfWidth">
                        <label runat="server" id="LabelRadDatePicker2">
                            Arrival
                        </label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <telerik:RadDatePicker RenderMode="Lightweight" ID="RadDatePicker1" runat="server" MinDate="2006-01-01" SharedCalendarID="sharedCalendar"
                            Width="150px">
                            <DateInput runat="server" ID="DateInput">
                            </DateInput>
                        </telerik:RadDatePicker>
                    </td>
                    <td>
                        <telerik:RadDatePicker RenderMode="Lightweight" ID="RadDatePicker2" runat="server" MinDate="2006-01-01" SharedCalendarID="sharedCalendar"
                            Width="150px">
                        </telerik:RadDatePicker>
                    </td>
                </tr>
            </table>
            <br />
            <telerik:RadButton RenderMode="Lightweight" ID="Button1" runat="Server" Text="Make reservation" OnClick="Button1_Click"></telerik:RadButton>
            <br />

            <asp:CompareValidator ID="CompareValidator1" runat="Server" ControlToCompare="RadDatePicker1"
                ControlToValidate="RadDatePicker2" Operator="GreaterThan" ErrorMessage=" *(<em>static</em>) Date range is not valid "
                Display="Dynamic"></asp:CompareValidator>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="Server" ControlToValidate="RadDatePicker1"
                ErrorMessage=" *(<em>static</em>) Departure date is not valid " Display="Dynamic"></asp:RequiredFieldValidator>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="Server" ControlToValidate="RadDatePicker2"
                ErrorMessage=" *(<em>static</em>) Arrival date is not valid " Display="Dynamic"></asp:RequiredFieldValidator>
            <br />
            <asp:Label ID="Label1" Text="&nbsp;" runat="Server" Font-Italic="true" Style="padding-left: 38px"></asp:Label>
        </div>
        <div class="demo-container">
            <table>
                <tr>
                    <td colspan="2">
                        <label>
                            <h3>Dynamic shared calendar:</h3>
                        </label>
                    </td>
                </tr>
                <tr>
                    <td class="halfWidth">
                        <label runat="server" id="LabelRadDatePicker3">
                            Departure
                        </label>
                    </td>
                    <td class="halfWidth">
                        <label runat="server" id="LabelRadDatePicker4">
                            Arrival
                        </label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <telerik:RadDatePicker RenderMode="Lightweight" ID="RadDatePicker3" runat="server" MinDate="2006-01-01" Width="150px">
                        </telerik:RadDatePicker>
                    </td>
                    <td>
                        <telerik:RadDatePicker RenderMode="Lightweight" ID="RadDatePicker4" runat="server" MinDate="2006-01-01" Width="150px">
                        </telerik:RadDatePicker>
                    </td>
                </tr>
            </table>
            <br />
            <telerik:RadButton RenderMode="Lightweight" ID="Button2" runat="Server" Text="Make reservation" OnClick="Button2_Click"></telerik:RadButton>
            <br />
            <asp:CompareValidator ID="CompareValidator2" runat="Server" ControlToCompare="RadDatePicker3"
                ControlToValidate="RadDatePicker4" Operator="GreaterThan" ErrorMessage=" *(<em>dynamic</em>) Date range is not valid "
                Display="Dynamic"></asp:CompareValidator>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="Server" ControlToValidate="RadDatePicker3"
                ErrorMessage=" *(<em>dynamic</em>) Departure date is not valid " Display="Dynamic"></asp:RequiredFieldValidator>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="Server" ControlToValidate="RadDatePicker4"
                ErrorMessage=" *(<em>dynamic</em>) Arrival date is not valid " Display="Dynamic"></asp:RequiredFieldValidator>
            <br />
            <asp:Label ID="Label2" Text="&nbsp;" runat="Server" Font-Italic="true" Style="padding-left: 38px"></asp:Label>
        </div>
        <telerik:RadCalendar RenderMode="Lightweight" ID="sharedCalendar" runat="server" EnableMultiSelect="false"
            RangeMinDate="2006/01/01">
        </telerik:RadCalendar>
        <asp:PlaceHolder ID="sharedCalendarPlaceHolder" runat="server"></asp:PlaceHolder>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance