Calendar

Overview
What's New
- Binding to Custom Collection
Calendar
Date picker
Time picker/DateTime picker
MonthYear picker
Accessibility and Internationalization
- WAI-ARIA Support

Rate this demo

Thank you for your post!

RadCalendar - Telerik's ASP.NET Calendar

Title and navigation

<<	<	May 2013 - June 2013	>	>>

May
	S	M	T	W	T	F	S
May
18	28	29	30	1	2	3	4
19	5	6	7	8	9	10	11
20	12	13	14	15	16	17	18
21	19	20	21	22	23	24	25
22	26	27	28	29	30	31	1
23	2	3	4	5	6	7	8

June
	S	M	T	W	T	F	S
June
22	26	27	28	29	30	31	1
23	2	3	4	5	6	7	8
24	9	10	11	12	13	14	15
25	16	17	18	19	20	21	22
26	23	24	25	26	27	28	29
27	30	1	2	3	4	5	6

RadDatePicker:

Open the calendar popup.

RadDateTimePicker:

Open the calendar popup.

Open the time view popup.

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 70+ other controls are part of RadControls 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 the business logic of the app.

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 RadControls) to quickly create, upgrade and configure your RadControls 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 RadControls, 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.

Read details on RadCalendar’s product page

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>
    </form>
</body>
</html>

Controls

SharePoint Web Parts

Support Resources

Integration Examples