Calendar

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

RadCalendar - Telerik's ASP.NET Calendar

Calendar
Title and navigation
Title and navigation
<<<April 2014 - May 2014><<
April 2014 - May 2014
April
April
 SMTWTFS
14303112345
156789101112
1613141516171819
1720212223242526
1827282930123
1945678910
May
May
 SMTWTFS
1827282930123
1945678910
2011121314151617
2118192021222324
2225262728293031
231234567

RadDatePicker
RadDatePicker
Open the calendar popup.
    

tlrk.it/150WZmG To test the behavior of our controls on mobile devices, scan the QR code.

tlrk.it/150WZmG

About RadCalendar for ASP.NET AJAX

RadCalendar controls is a set of highly configurable components for displaying and selecting date and time values. The calendar and various picker controls facilitate the interaction between the user and your web site and save you a lot of client-side scripting. Features include adjacent months preview, multi-month view, context menus, shared controls, a set of built-in skins and many more.

RadCalendar and 80+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

About This Demo

This demo illustrates the Multi-month view calendar, RadDatePicker and RadDateTimePicker controls.

Note: You need to set AutoPostBack property of RadCalendar to true in order to use Multi-Month mode.


Get Started

  • Use Telerik’s Visual Studio Extensions (which you have installed together with the Telerik controls) to quickly create, upgrade and configure your Telerik UI projects. Save time by using the ready-to-use Visual Studio templates that cover common application scenarios.
  • Find the controls in need in your VS toolbox and use the Design-time surface and rich wizards to configure them quickly.
  • If you’d like to learn more about how to best implement the controls, browse the Telerik folder in your Start menu and use the shortcuts there to access the local demos, online documentation or open the sample examples app in Visual Studio.
  • If you like this particular Calendar demo, you can use the following path to find it in the sample website application:
calendar/examples/overview

Key Features

  • Flexible client-side API
  • A multi-view presentation for showing several months in a single control.
  • The ability to define special days for per-day customization.
  • Template support - including day templates as well as header and footer templates.
  • Keyboard navigation.
  • Visual Appeal - ships with rich set of skins for easy and consistent styling.

Resources

C# VB
Show code in new window Demo isolation steps
<%@ Page Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="~/Calendar/Examples/Overview/Info.ascx" TagName="Info" TagPrefix="qsf" %>
<!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>
    <title>AJAX Calendar Demo | RadCalendar for ASP.NET</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="QsfSkinManager" runat="server" ShowChooser="true" />
    <div id="decorationZone">
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
        </telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
            <telerik:RadCalendar ID="RadCalendar1" EnableMultiSelect="true" EnableKeyboardNavigation="true"
                ShowColumnHeaders="true" ShowDayCellToolTips="true" ShowRowHeaders="true" runat="server"
                MultiViewColumns="2" AutoPostBack="true">
                <FastNavigationSettings EnableTodayButtonSelection="true">
                </FastNavigationSettings>
            </telerik:RadCalendar>
        </telerik:RadAjaxPanel>
        <br />
        <div class="controls">
            <label>
                RadDatePicker:</label>
            <telerik:RadDatePicker runat="server" ID="RadDatePicker1" Width="130px">
                <Calendar ID="Calendar1" runat="server" EnableKeyboardNavigation="true">
                </Calendar>
            </telerik:RadDatePicker>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <label>
                RadDateTimePicker:</label>
            <telerik:RadDateTimePicker runat="server" ID="RadDateTimePicker1" Width="220px">
                <Calendar ID="Calendar4" runat="server" EnableKeyboardNavigation="true">
                </Calendar>
            </telerik:RadDateTimePicker>
        </div>
    </div>
     <div class="qsf-overview-qr">
        <p>
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Common/Images/QrCodesOverview/Calendar.png" AlternateText="tlrk.it/150WZmG" />
            To test the behavior of our controls on mobile devices, scan the QR code.
        </p>
        <a href="http://tlrk.it/150WZmG">tlrk.it/150WZmG</a>
    </div>
    </form>
</body>
</html>