Home / AJAX

HOW TO Use the Calendar Control

RSS
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

  • Summary - A behavior that attaches a calendar date selector to a textbox.
  • Parameters - Sys.UI.DomElement element

Events

  • showing(handler) - Add or removes an event handler for the showing event.
    • Parameters - A function representing the event handler.
  • shown(handler) - Add or removes an event handler for the shown event.
    • Parameters - A function representing the event handler.
  • hiding(handler) - Add or removes an event handler for the hiding event.
    • Parameters - A function representing the event handler.
  • hidden(handler) - Add or removes an event handler for the hidden event.
    • Parameters - A function representing the event handler.
  • dateSelectionChanged(handler) - Add or removes an event handler for the dateSelectionChanged event.
    • Parameters - A function representing the event handler.

Methods

  • raiseShowing(eventArgs) - Raises the showing event.
    • Parameters - A Sys.EventArgs object representing event arguments for the showing event.
  • raiseShown(eventArgs) - Raises the shown event.
    • Parameters - A Sys.EventArgs object representing event arguments for the shown event.
  • raiseHiding(eventArgs) - Raises the hiding event.
    • Parameters - A Sys.EventArgs object representing event arguments for the hiding event.
  • raiseHidden(eventArgs) - Raises the hidden event.
    • Parameters - A Sys.EventArgs object representing event arguments for the hidden event.
  • raiseDateSelectionChanged(eventArgs) - Raises the dateSelectionChanged event.
  • initialize() - Initializes the components and parameters for the calendar behavior.
  • dipose() - Disposes the calendar behavior's resources.
  • show() - Shows the calendar.
  • hide() - Hides the calendar.
  • focus() - Sets the focus to the calendar control.
  • blur() - Removes the focus from the calendar control.
  • suspendLayout() - Suspends layout of the calendar control behavior while setting properties.
  • resumeLayout() - Resumes layout of the calendar control behavior and performs any pending layout requests.
  • invalidate() - Performs layout of the calendar control behavior unless layout is suspended.

Properties

  • clearTime - Gets or sets a boolean value that determines whether time should be cleared in edited date/time.
  • animated - Gets or sets a boolean value that determines whether changing modes is animated.
  • enabled - Gets or sets a boolean value whether the calendar behavior is available for the current element.
  • button - (Optional) Gets or sets a Sys.UI.DomElement representing the button to use to show the calendar.
  • popupPosition - Gets or set a Sys.Extended.UI.CalendarPosition object that contains the location where the popup should be positioned relative to the target control.
  • format - Gets or sets a sting containing the format to use for the date value.
  • todaysDateFormat - Gets or sets a string containing the format to use for the today's date.
  • daysModeTitleFormat - Gets or sets a string containing the format to use for the title when in days mode.
  • selectedDate - Gets or sets a date object containing the date value represented by the text box.
  • defaultView - Gets or sets a Sys.Extended.UI.CalendarDefaultView object representing the default view of the calendar when it first pops up.
  • visibleDate - Gets or sets a date object containing the date currently visible in the calendar.
  • isOpen - Gets a boolean value that determines whether the calendar is open.
  • todaysDate - Gets or sets a date object containing today's date.
  • firstDayOfWeek - Gets or sets a Sys.Extended.UI.FirstDayOfWeek object that contains the day of the week to appear as the first day in the calendar.
  • cssClass - Gets or sets a string containing the CSS class selector to use to change the appearance of the calendar.
  • todayButton - Gets a Sys.UI.DomElement object specifying the button used to select today's date.
  • dayCell - Gets a Sys.UI.DomElement object specifying day cell at the specified row or column.

Sys.Extended.UI.CalendarPosition Enum

  • Summary - Position of the popup relative to the target control.

Fields

  • BottomLeft - A field that is used to position the calendar control.
  • BottomRight - A field that is used to position the calendar control.
  • TopLeft - A field that is used to position the calendar control.
  • TopRight - A field that is used to position the calendar control.
  • Left - A field that is used to position the calendar control.
  • Right - A field that is used to position the calendar control.

Sys.Extended.UI.CalendarDefaultView Enum

  • Summary - Choices for default view of the calendar control when it is first displayed.

Fields

  • Days - A field that is used when displaying the calendar control.
  • Months - A field that is used when displaying the calendar control.
  • Years - A field that is used when displaying the calendar control.

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" />

  • TargetControlID - The ID of the TextBox to extend with the calendar.
  • CssClass - Name of the CSS class used to style the calendar. See the Calendar Theming section for more information.
  • Format - Format string used to display the selected date.
  • PopupButtonID - The ID of a control to show the calendar popup when clicked. If this value is not set, the calendar will pop up when the textbox receives focus.
  • PopupPosition - Indicates where the calendar popup should appear at the BottomLeft(default), BottomRight, TopLeft, TopRight, Left or Right of the TextBox.
  • SelectedDate - Indicates the date the Calendar extender is initialized with.



Calendar Additional Code Samples

  Name Size
- Calendar.png 29.83 KB