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
<<<November, 2014 - December, 2014><<
November, 2014 - December, 2014
November
November
 SMTWTFS
442627282930311
452345678
469101112131415
4716171819202122
4823242526272829
4930123456
December
December
 SMTWTFS
4930123456
5078910111213
5114151617181920
5221222324252627
5328293031123
245678910

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 runat="server">
    <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>