HOW TO Use the Calendar Control

Modified on 2010/01/14 23:02 by Erik Reitan — Categorized as: Uncategorized

Calendar Demonstration



Calendar Description

The Calendar control enables you to display date picker when focus is moved to an input element.

Calendar is an ASP.NET AJAX extender that can be attached to any ASP.NET TextBox control. It provides client-side date-picking functionality with customizable date format and UI in a popup control. You can interact with the calendar by clicking on a day to set the date, or the "Today" link to set the current date.

In addition, the left and right arrows can be used to move forward or back a month. By clicking on the title of the calendar you can change the view from Days in the current month, to Months in the current year. Another click will switch to Years in the current Decade. This action allows you to easily jump to dates in the past or the future from within the calendar control.

Video - How Do I: Configure the ASP.NET AJAX Calendar Control?

Calendar Client Code Sample

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    </style>
    <link href="http://ajax.microsoft.com/ajax/beta/0911/extended/Calendar/Calendar.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.js" type="text/javascript"></script>    
    <script src="http://ajax.microsoft.com/ajax/beta/0911/Start.debug.js" type="text/javascript"></script>
    <script src="http://ajax.microsoft.com/ajax/beta/0911/extended/ExtendedControls.debug.js" type="text/javascript"></script>
    <script type="text/javascript">
        Sys.debug = true;
        Sys.require(Sys.components.calendar, function() {
            $("#bdate").calendar({});
        });
    </script>
</head>
<body>
    
    <div style="width:1px;height:500px"></div>
    <input type="text" id="bdate" />
    
    
</body>
</html>

Calendar Client Reference

Sys.Extended.UI.CalendarBehavior Class


Events


Methods


Properties


Sys.Extended.UI.CalendarPosition Enum


Fields


Sys.Extended.UI.CalendarDefaultView Enum


Fields


Calendar Server Code Sample

        <asp:TextBox runat="server" ID="Date5" />
        <asp:ImageButton runat="Server" ID="Image1" ImageUrl="~/images/Calendar_scheduleHS.png" 
                         AlternateText="Click to show calendar" /><br />
        <ajaxToolkit:CalendarExtender ID="calendarButtonExtender" runat="server" 
                     TargetControlID="Date5" PopupButtonID="Image1" />

Calendar Server Reference

The properties in italics are optional.

<ajaxToolkit:Calendar runat="server"
    TargetControlID="Date1"
    CssClass="ClassName"
    Format="MMMM d, yyyy"
    PopupButtonID="Image1" />




Calendar Additional Code Samples