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.

The page uses the culture setting English (United States) which was specified by the browser. The page properties have Culture="auto" and UICulture="auto" set to enable the same. See this MSDN article for more information. The ScriptManager on this Calendar demo page has EnableScriptGlobalization="true" and EnableScriptLocalization="true".

The calendar associated with a button has been initialized with this code. The properties in italic 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.

.MyCalendar .ajax__calendar_container {
    border:1px solid #646464;
    background-color: lemonchiffon;
    color: red;
}

• .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.