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

WebForms Calendar Overview

Pick a Date
Thursday, April 18, 2024
April 2024
April 2024
 SMTWTFS
1431123456
1578910111213
1614151617181920
1721222324252627
182829301234
19567891011

This demo illustrates the RadCalendar for ASP.NET AJAX control.

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 facilitates the interaction between the user and your web site and saves you a lot of client-side scripting. Features include adjacent months preview, multi-month view, context menus, a set of built-in skins and many more.

RadCalendar and 120+ 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.

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.

More about Calendar for ASP.NET AJAX
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page  CodeFile="DefaultCS.aspx.cs" Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Calendar.Overview.DefaultCS"  %>

<%@ 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 no-bg" runat="server" id="Div2">
            <span class="title">Pick a Date</span>
            <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1">
                <span class="picked-date"><em></em>
                    <asp:Label runat="server" Text="Monday, August 10, 2015" ID="Lable1"></asp:Label></span>
                <telerik:RadCalendar RenderMode="Lightweight" ID="RadCalendar1" Width="100%" EnableMultiSelect="false" EnableKeyboardNavigation="true"
                    ShowColumnHeaders="true" ShowDayCellToolTips="true" SelectedDate="08/10/2015" OnSelectionChanged="RadCalendar1_SelectionChanged" ShowRowHeaders="true" runat="server"
                    AutoPostBack="true">
                    <FastNavigationSettings EnableTodayButtonSelection="true">
                    </FastNavigationSettings>
                </telerik:RadCalendar>
            </telerik:RadAjaxPanel>
        </div>
        <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance