Use the ASP. NET Ajax-calendar Control

Document directory

• Introduction
• Important attributes
• Example 1
• Example 2

Introduction

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