Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q2 2011 released 07/12/2011
select

Calendar / First look

RadCalendar for ASP.NET AJAX logoRadCalendar for ASP.NET AJAX


Configurator









Choose Title Format:

Fast navigation step:



Select rendering direction:
Display:

Set culture:




Min selectable date:  
Max selectable date:  


  • This example demonstrates how the Telerik RadCalendar allows you to customize the calendar main area, enable navigation/fast navigation or selection, choose title format, render direction or number of displayed columns/rows. Basically, these are the most commonly used configuration settings for a web calendar control which can be easily tested together.

    All of them are controlled through the following properties:

    Enable/disable multi-select:
    EnableMultiSelect = true or false

    Enable/disable navigation:
    EnableNavigation = true or false

    Enable/disable fast navigation:
    EnableMonthYearFastNavigation = true or false. The today button in the fast navigation menu could be set to select or just to navigate to the today's date when clicking it by the property EnableTodayButtonSelection.

    Enable/Disable the whole view selector:
    EnableViewSelector = true or false

    Show/Hide the column headers:
    ShowColumnHeaders = true or false

    Set the respective column headers to be used as selectors (depends on the rendering direction) to the days names of the week:
    UseColumnHeadersAsSelectors = true or false

    Show/Hide the row headers:
    ShowRowHeaders = true or false

    Set the respective row headers to be used as selectors (depends on the rendering direction) to the week numbers in the year:
    UseRowHeadersAsSelectors = true or false

    Enable fast navigation calendar shadow effect
    EnableShadows = true or false (true by default)

    Choose calendar title format :
    TitleFormat = MM/yy, MMMM yyyy, etc. (valid values are defined by the standard date format options)

    Fast navigation step:
    FastNavigationStep - accepts int values

    Changing month layout:
    MonthLayout = MonthLayout.Layout_7columns_x_6rows, etc. (valid values are defined by the MonthLayout enumeration in the Telerik.WebControls.Base.Calendar.Enumerations namespace)

    Select render direction:
    Orientation - property which accepts values from the Telerik.Web.UI.Calendar.Orientation enumeration

    Min/Max date selection range:
    RangeMinDate/RangeMaxDate - properties which accepts DateTime values to define date selection range for the calendar instance

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="vb" CodeFile="DefaultVB.aspx.vb" AutoEventWireup="false" Inherits="Telerik.Web.Examples.Calendar.Functionality.MainAreaCustomization.DefaultVB" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ 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">
        <qsf:HeadTag runat="server" ID="Headtag1"></qsf:HeadTag>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
        <qsf:Header ID="Header1" runat="server" NavigationLanguage="VB"></qsf:Header>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" />
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadCalendar1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadCalendar1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="chkEnableMultiSelect">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadCalendar1" LoadingPanelID="RadAjaxLoadingPanel1">
                        </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="chkShowNavigation">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadCalendar1" LoadingPanelID="RadAjaxLoadingPanel1">
                        </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="chkShowFastNavigation">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadCalendar1" LoadingPanelID="RadAjaxLoadingPanel1">
                        </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="chkTodayButtonSelection">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadCalendar1" LoadingPanelID="RadAjaxLoadingPanel1">
                        </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="chkEnableViewSelector">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadCalendar1" LoadingPanelID="RadAjaxLoadingPanel1">
                        </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="chkShowColumnHeaders">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadCalendar1" LoadingPanelID="RadAjaxLoadingPanel1">
                        </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="chkUseColumnHeadersAsSelectors">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadCalendar1" LoadingPanelID="RadAjaxLoadingPanel1">
                        </telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="chkShowRowHeaders">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadCalendar1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="chkUseRowHeadersAsSelectors">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadCalendar1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="chkEnableShadows">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadCalendar1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                    </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="ddlDateFormat">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadCalendar1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="ddlFastNavigationStep">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadCalendar1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="ddlCultureOptions">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadCalendar1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="ddlMonthLayout">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadCalendar1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="rblRenderDirection">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="rblRenderDirection" />
                        <telerik:AjaxUpdatedControl ControlID="RadCalendar1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="minDateInput">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadCalendar1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="maxDateInput">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadCalendar1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
        <div style="float: left;">
            <telerik:RadCalendar ID="RadCalendar1" runat="server" TitleFormat="MMMM yyyy" />
        </div>
        <span style="font: 30px bold; color: Gray; vertical-align: top; float: right">
            <img src="Img/RadCalendar_ASPNET_AJAX.gif" alt="RadCalendar for ASP.NET AJAX logo" />RadCalendar
            for ASP.NET AJAX</span>
        <div style="clear: both;">
        </div>
        <br />
        <br />
        <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1" Title="Configurator"
            Expanded="true">
            <table>
                <tr>
                    <td>
    <asp:CheckBox runat="server" ID="chkEnableMultiSelect" Text="Enable multi-select"
    AutoPostBack="True"></asp:CheckBox>
                        <br />
                        <asp:CheckBox ID="chkShowNavigation" runat="server" AutoPostBack="True" Text="Enable navigation" />
                        <br />
                        <asp:CheckBox ID="chkShowFastNavigation" runat="server" AutoPostBack="True" Text="Enable fast navigation" />
                        <br />
                        <asp:CheckBox ID="chkTodayButtonSelection" runat="server" AutoPostBack="True" Text="Enable fast navigation today button" />
                        <br />
    <asp:CheckBox runat="server" ID="chkEnableViewSelector" Text="Enable view selector"
    AutoPostBack="True"></asp:CheckBox>
                        <br />
    <asp:CheckBox runat="server" ID="chkShowColumnHeaders" Text="Show column headers"
    AutoPostBack="True"></asp:CheckBox>
                        <br />
    <asp:CheckBox runat="server" ID="chkUseColumnHeadersAsSelectors" Text="Use column headers as selectors"
    AutoPostBack="True"></asp:CheckBox>
                        <br />
                        <asp:CheckBox runat="server" ID="chkShowRowHeaders" Text="Show row headers" AutoPostBack="True">
                        </asp:CheckBox>
                        <br />
    <asp:CheckBox runat="server" ID="chkUseRowHeadersAsSelectors" Text="Use row headers as selectors"
    AutoPostBack="True"></asp:CheckBox>
                            <br />
    <asp:CheckBox runat="server" ID="chkEnableShadows" Text="Enable shadows"
    AutoPostBack="True" OnCheckedChanged="chkEnableShadows_CheckedChanged"></asp:CheckBox>
                    </td>
                    <td>
                        Choose Title Format:<br />
                        <asp:DropDownList ID="ddlDateFormat" runat="server" Width="80%" AutoPostBack="True">
                            <asp:ListItem Value="MMMM yyyy">MMMM yyyy</asp:ListItem>
                            <asp:ListItem Value="MM/yy">MM/yy</asp:ListItem>
                            <asp:ListItem Value="MM-yy">MM-yy</asp:ListItem>
                            <asp:ListItem Value="MMM yyyy">MMM yyyy</asp:ListItem>
                        </asp:DropDownList>
                        <br />
                        Fast navigation step:<br />
    <asp:DropDownList ID="ddlFastNavigationStep" runat="server" Width="80%" AutoPostBack="True"
    OnSelectedIndexChanged="ddlFastNavigationStep_SelectedIndexChanged">
                            <asp:ListItem Value="3">3(default)</asp:ListItem>
                            <asp:ListItem Value="4">4</asp:ListItem>
                            <asp:ListItem Value="6">6</asp:ListItem>
                            <asp:ListItem Value="12">12</asp:ListItem>
                        </asp:DropDownList>
                        <br />
                        <br />
                        <br />
                        Select rendering direction:
                        <br />
                        <asp:RadioButtonList ID="rblRenderDirection" runat="server" AutoPostBack="True">
                            <asp:ListItem Value="1">Render In Rows</asp:ListItem>
                            <asp:ListItem Value="2">Render In Columns</asp:ListItem>
                        </asp:RadioButtonList>
                    </td>
                    <td valign="top">
                        Display:
                        <br />
                        <asp:DropDownList runat="server" ID="ddlMonthLayout" AutoPostBack="True">
                            <asp:ListItem Value="Layout_7columns_x_6rows">7 columns x 6 rows</asp:ListItem>
                            <asp:ListItem Value="Layout_14columns_x_3rows">14 columns x 3 rows</asp:ListItem>
                            <asp:ListItem Value="Layout_21columns_x_2rows">21 columns x 2 rows</asp:ListItem>
                        </asp:DropDownList>
                        <br />
                        Set culture:
                        <br />
                        <asp:DropDownList ID="ddlCultureOptions" runat="server" AutoPostBack="true" />
                        <br />
                        <br />
                        <br />
                        <br />

                        <script type="text/javascript">
                            function Error(sender, eventArgs) {
                                sender._invalidate();
                                sender.updateCssClass();

                                var evt = eventArgs.get_domEvent();

                                evt.cancelBubble = true;
                                evt.returnValue = false;

                                if (evt.stopPropagation) {
                                    evt.stopPropagation();
                                    evt.preventDefault();
                                }
                            }
                        </script>

                        Min selectable date: &nbsp;
                        <telerik:RadDateInput ID="minDateInput" runat="server" AutoPostBack="true" MinDate="1/1/1800"
                            ClientEvents-OnError="Error" />
                        <br />
                        Max selectable date: &nbsp;
                        <telerik:RadDateInput ID="maxDateInput" runat="server" AutoPostBack="true" MaxDate="1/1/2900"
                            ClientEvents-OnError="Error" />
                        <br />
    <asp:CompareValidator ID="CompareValidator1" runat="Server" ControlToCompare="minDateInput"
    ControlToValidate="maxDateInput" Operator="GreaterThanEqual" ErrorMessage=" *Date range is not valid "
    Display="Dynamic" />
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="Server" ControlToValidate="minDateInput"
    ErrorMessage=" *Min date is not valid " Display="Dynamic" />
    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="Server" ControlToValidate="maxDateInput"
    ErrorMessage=" *Max date is not valid " Display="Dynamic" />
                    </td>
                </tr>
            </table>
        </qsf:ConfiguratorPanel>
        <br />
        <qsf:Footer ID="Footer1" runat="server"></qsf:Footer>
        </form>
    </body>
    </html>

Get more than expected!

 
 

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451