quinta-feira, 6 de janeiro de 2011

AJAX - Calendar Extender

Drag and Drop the calendar extender on the AJAX enabled aspx page. Here AJAX enabled aspx page means the web page having AJAX script manager on the top of the page. Calendar extender will just show the placeholder in design view of web page. Next drag and drop the standard TextBox server control. By default Textbox will have its ID as TextBox1 and Calendar extender’s ID as CalendarExtender1. In the next step adjust the following properties of Calendar extender according to your requirement:
Animate: Accepts value as true/false. If true then it animates the calendar actions.
FirstDayOfWeek: It is an enumerator type collection that specifies to display the first of week in the calendar at runtime.
Format: You can set the different date formats using date formats e.g.: MMM dd, yyyy; MMM DDD dd, yyyy.
PopUpButtonID: You can specify the ID of image control, button control or linkbutton control to popup the calendar control. If PopUpButtonID is not specified then Calendar control popups when associated textbox gets focus.
PopUpPosition: This property sets the position of calendar control, that where should it appear such as BottomLeft of textbox, BottomRight, TopLeft, TopRight, Right or Left.
SelectedDate: You can specify the default date for the Calendar using SelectedDate Property. Calendar control initializes with the specified date.
TargetControlID: Specify the target TextBox ID in this property that will display the user selected date in the specified date format.

How to Use Calendar Extender on Web Page

When Calendar control appears it displays the default view having Month Name and Year at Top along with left and right arrow. You can use left and right arrow to shift to previous or next month regarding the currentday view.
If you will click on the Month Name and Year at top then calendar control will switch to the month view. You can select the month of year specified for the calendar control or current year by default.
If you will click on the Year at top then the Calendar control will switch to the year view.
  

Sem comentários:

Enviar um comentário