ASP.NET AJAX Control Toolkit Demos v20.1.0.0

Calendar Sample
Ajax Control Toolkit
Calendar Demonstration

(Set the focus to the textbox to show the calendar)


Calendar with a custom style and formatted date (opening on left):

(Set the focus to the textbox to show the calendar)


Calendar with an associated button:

(Click the image button to show the calendar; this calendar dismisses automatically when you choose a date)


Calendar with date range:
(Set the focus to the textbox to show the calendar. This calendar's StartDate property is '8/3/2010' and EndDate is '10/7/2010')
Calendar Description
The Calendar control extender can be attached to any ASP.NET TextBox control. It provides client-side date-picking functionality with a customizable date format and UI in a popup control.
Calendar Properties
Properties
  • Animated - Sets whether or not changing modes is animated. The default value is true
  • ClearTime - Sets whether or not time should be cleared in edited date/time. The default value is false
  • CssClass - The name of the Cascading Style Sheet class used to style the calendar.
  • DaysModeTitleFormat - A format string used to display the Days Mode Title. The default value is MMMM, yyyy.
  • DefaultView - The default view of the calender. The default value is Days.
  • EnabledOnClient - Sets whether or not this behavior is available for the current element. The default value is true
  • EndDate - The end date for a range.
  • FirstDayOfWeek - The first day of the week. The default value is Default
  • Format - A format string used to display the selected date. The default value is d
  • OnClientDateSelectionChanged - A script that is executed when a new date is selected.
  • OnClientHidden - A client script that is executed immediately after the calendar is hidden.
  • OnClientHiding - A client script that is executed immediately before the calendar is hidden.
  • OnClientShowing - A client script that is executed immediately before the calendar is displayed.
  • OnClientShown - A client script that is executed immediately after the calendar is displayed.
  • 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 - The popup position of the calendar. The default value is BottomLeft.
  • SelectedDate - The date that the calendar is initialized with.
  • StartDate - The start date for a range.
  • TodaysDateFormat - A format string used to display today's date. The default value is MMMM d, yyyy.
Calendar Theming
You can change the look and feel of Calendar using the Calendar CssClass property. Calendar has a predefined set of CSS classes that can be overridden. It has a default style which is embedded as a WebResource and is a part of the Toolkit assembly that has styles set for all the sub-classes. You can find them in the Toolkit solution, in the "AjaxControlToolkit\Calendar\Calendar.css" file. If your CssClass does not provide values for any of those then it falls back to the default value. To customize the same the user would have to set the CssClass property to the name of the CSS style and define the styles for the individual classes so that the various elements in a Calendar control can be styled accordingly. The second calendar in the demo above uses the "MyCalendar" style. which sets the Calendar container style as follows.
.MyCalendar .ajax__calendar_container {
    border:1px solid #646464;
    background-color: lemonchiffon;
    color: red;
}
Calendar Css Classes
  • .ajax__calendar_container : The outer rectangular container that supplies the border around the calendar element. Child Css classes: .ajax__calendar_header,.ajax__calendar_body,.ajax__calendar_footer.
  • .ajax__calendar_header : A container element that holds the next and previous arrows and the title of the current view. Child Css classes: .ajax__calendar_prev, .ajax__calendar_title, .ajax__calendar_next.
  • .ajax__calendar_prev : An element that displays the arrow to view the previous set of data in the view(previous month/year/decade). Child Css classes: none.
  • .ajax__calendar_title : An element that displays the title of the current view (month name, year, decade). Child Css classes: none.
  • .ajax__calendar_next : An element that displays the arrow to view the previous set of data in the view (previous month/year/decade). Child Css classes: none.
  • .ajax__calendar_body : A container element that holds the days, months, and years panes. Also provides a fixed rectangle with hidden overflow that is used for transitioning between views (next/previous month, or days/months/years).Child Css class: .ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years.
  • .ajax__calendar_days : A container element that holds the layout for the days in a month. Child Css classes: .ajax__calendar_dayname, .ajax__calendar_day
  • .ajax__calendar_dayname : An element that displays the short name of the day of the week. Child Css classes: none.
  • .ajax__calendar_day : An element that displays the day of the month. Child Css classes: none
  • .ajax__calendar_months : A container element that holds the layout for the months in a year. Child Css classes: .ajax__calendar_month.
  • .ajax__calendar_month : An element that displays the month of the year. Child Css classes: none
  • .ajax__calendar_years : A container element that holds the layout for the years in a decade. Child Css classes: .ajax__calendar_year.
  • .ajax__calendar_year : An element that displays the year in a decade. Child Css classes: none
  • .ajax__calendar_footer : A container element that holds the current date. Child Css classes: .ajax__calendar_today.
  • .ajax__calendar_today : An element that displays the current date. Child Css classes: none.
  • .ajax__calendar_hover : This is applied to an element in the DOM above a day, month or year and is used to apply CSS attributes that show a hover state. Child Css classes: .ajax__calendar_day, .ajax__calendar_month, .ajax__calendar_year
  • .ajax__calendar_active : This is applied to an element in the DOM above a day, month or year and is used to apply CSS attributes that show the currently selected value. Child Css classes: .ajax__calendar_day, .ajax__calendar_month, .ajax__calendar_year.
  • .ajax__calendar_other : This is applied to an element in the DOM above a day or year that is outside of the current view (day not in the visible month, year not in the visible decade). Child Css classes: .ajax__calendar_day, .ajax__calendar_year.
Copyright © 2012-2024 CodePlex Foundation. All Rights Reserved.