Use the ASP. NET Ajax-calendar Control

Source: Internet
Author: User
Document directory
  • Introduction
  • Important attributes
  • Example 1
  • Example 2

The calendar control is a simple control that is mainly used to provide calendar options on pages. In fact, there are many calendar controls written in JavaScript, however, the canlendar calendar control allows us to achieve this effect more quickly. You only need to make some simple settings.

Important attributes

Targetcontrolid: controls used to display the selected date. The control must be a textbox.
Cssclass: Set the calendar Style
Format: Display date format, for example, yymmdd. 071105 is displayed.
Popupbuttonid: When the date is displayed by selecting a button, it is the ID of the change button, generally a calendar image.

Example 1

1. Open visual studio2005 and create an ajaxcontroltoolkit website.
2. Add a form under the root directory of the website named calendar1.aspx.
3. Switch to the design view and add scriptmanger, A Textbox, and a calendarentender control to the page.
4. Set the attributes of the calendarextender control as follows:

<cc1:CalendarExtender TargetControlID="txtDate" runat="server" Format="yyMMdd" ID="calDate"   CssClass="MyCalendar"/>

The following is the style code, which corresponds to the above cssclass. The explanation of style modification is described later:

<style type="text/css">       .MyCalendar .ajax__calendar_container      {          border:1px solid #646464;          background-color:#faac38;                }      .MyCalendar .ajax__calendar_other .ajax__calendar_day,      .MyCalendar .ajax__calendar_other .ajax__calendar_year      {          color:#ffffff;      }      .MyCalendar .ajax__calendar_hover .ajax__calendar_day      {          color:red;          background-color:#e8e8e8;      }      .MyCalendar .ajax__calendar_active .ajax__calendar_day      {          color:blue;          font-weight:bolder;          background-color:#e8e8e8;      }  </style>

5. save the design and run F5. When the text box control obtains the focus, the calendar control is displayed. The date selected after the date is selected is displayed in the text box in the specified format, the calendar control is automatically hidden.

Example 2

In this example, a calendar control is displayed after you click an image button, which is frequently used on websites.

1. Create a web form under the root directory of the website and name it calendar2.aspx.

2. The steps are the same as above, but an image control is added to the page. the settings of the calendar control are as follows:

<cc1:CalendarExtender TargetControlID="txtDate" runat="server" Format="yyMMdd" ID="calDate"  PopupButtonID="imgDate" CssClass="MyCalendar"/>

The setting is basically the same as the previous example. A popupbuttonid is added to specify the image to be clicked.
3. Save the design and press F5. When you click a calendar image, the calendar control is displayed. If you select a date, the control is hidden and the selected date is displayed in the text box.

Note: The attribute format is used to control the date display format, but note that the monthly m must be capitalized, for example, yyyy-mm-dd, yyyy/M/d, yyyy-mm-dd

Cssclass description:

. Ajax_calendar_container: the overall content of the calendar control.

. Ajax_calendar_footer: footer of the calendar Control

. Ajax_calendar_header: the header of the calendar control.

. Ajax_calendar_activa. ajax_calendar_day: the style of the selected date. Generally, the selected date is displayed in another color.

. Ajax_calendar_hover. ajax_calendar_day: Specifies the style when you move the cursor over the date. Generally, the foreground color and background color of the date are changed.

. Ajax_calendar_other. ajax_calendar_day: name of the style that is not the date of this month

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.