The Calendar control initially appears to be like the native Calendar control provided with ASP.NET. But it goes in a new direction: client-side operation. The calendar fills in each month and manages the current selection using client side JavaScript that gives the user a faster, more interactive experience. It also means that you don’t require a post back just to select a date or change the month. Calendar can be included in your data entry forms and only post back when the user submits the form. That's just the start. Here are the features of this control.

Product Features

Appearance

• Style sheet driven – Most elements, whether they are days in the month, controls, or areas of the calendar, have unique style sheet names. With so many names, setup is made very easy by a supplied style sheet file which the control uses by default. You simply edit the style sheet file and the appearance quickly changes, all without editing a single property.
  You can also replace the graphic buttons.

• There are three ways to move to another month. The classic movement is by one month. You can add additional movement commands to jump by a number of months of your choosing, such as a year. Plus the user can popup the MonthYearPicker, a control that quickly gets you to any month in any year.

• You can show commands such as Select Today, Clear the calendar, and show the month with the selection in the footer. The footer can display of the selected date.
• Include a column of week numbers.

• Show multiple months. You can add up to 6 rows and columns of months.

• There is a context menu available from a right click or an optional Help button shown in the header.
  These features require a license covering Peter's Interactive Pages module.

• Use the SpecialDates control to customize individual dates and make them unselectable. This very powerful tool can turn an ordinary calendar into a fancy schedule.

• On Internet Explorer, users can use their keyboards to select commands and move the selected date around.
• Days can optionally highlight with a different border and/or font color when the mouse passes over them.
• On Internet Explorer, there are two animations: when changing months, it rotates or swaps calendars. When opening or closing any popup, the control fades in and out.

Other Features

• Supports Databinding your date value to the control.
• Impose date range limits so the user is compelled to enter a date within the range. Dates outside the range are unselectable. The MonthYearPicker and the month movement buttons all respect these limits.
• All Peter's Date and Time controls use the System.Globalization.CultureInfo object to determine the extact format. So they are fully localizable.
• Optionally post back when the user changes the selection or the month viewed.
• ASP.NET 2.0 users can optionally use callbacks (AJAX type requests) to update the contents of the date cells when the month view changes.
• Can update another control through a client side script that you provide or even a simple ID to the other field, if that field is a Label or TextBox.
• Can be used as a popup when you select the PopupCalendar control.
• Javascript programmers can use several published methods to interact with the control.

Demos

September 2010 Sun Mon Tue Wed Thu Fri Sat 29 30 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 1 2 3 4 5 6 7 8 9	Sep 2010     Sun Mon Tue Wed Thu Fri Sat 29 30 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 1 2 3 4 5 6 7 8 9	September 2010   S M T W T F S       1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30                      Today     Show
Almost the default. Try the MonthYearPicker by clicking on or to the right of the month and year.	Notice the green border when this field has focus. Try typing digits or using the arrow keys (IE only). Click on a date to see the open space fill in.	Cells outside the current month are not selectable. Have you tried the context menu yet? Right click on the control.
September     2010   Su Mo Tu We Th Fr Sa 29 30 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 1 2    Today     Show	September 2010 - October 2010   September 2010   Sun Mon Tue Wed Thu Fri Sat 36 29 30 31 1 2 3 4 37 5 6 7 8 9 10 11 38 12 13 14 15 16 17 18 39 19 20 21 22 23 24 25 40 26 27 28 29 30 1 2 41 3 4 5 6 7 8 9 October 2010   Sun Mon Tue Wed Thu Fri Sat 40 26 27 28 29 30 1 2 41 3 4 5 6 7 8 9 42 10 11 12 13 14 15 16 43 17 18 19 20 21 22 23 44 24 25 26 27 28 29 30 45 31 1 2 3 4 5 6    Today     Clear     Show
The Special command is associated with the cell marked 5 days from now. You control which day it shows. You can change the label of the button too.	Uses Multiple Month View to show 2 months. It also shows the week number column, command buttons, and the selected date as a label. Finally, its MonthYearPicker is a different format called "Few Years".
Enter a des:	September 2010   Sun Mon Tue Wed Thu Fri Sat 29 30 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 1 2 3 4 5 6 7 8 9
Here are two controls, the DateTextBox and Calendar. They are connected together by assigning the Calendar.ID to the DateTextBox.ConnectToCalendarControlID property. When you change a value in one, it updates the other. (If you edit the DateTextBox, remove the focus to see it update.) Use this when you prefer to have the calendar always open.

ASP.NET Syntax Examples

<des:Calendar id="Calendar1" runat="server" tabIndex="1" 
   IncrementalButtonHorzPlacement="Left"></des:Calendar>
   
<des:Calendar id="Calendar2" runat="server" tabIndex="2" Width="200px" 
   IncrementalButtonHorzPlacement="Left" CurrentDateCellWidth="190px" 
   FocusBorderColor="Lime" WeekendBackground="Beige" 
   CurrentDatePlacement="FirstRow" CurrentDateFormat="Long" 
   JumpButtonHorzPlacement="Right" HelpButtonHorzPlacement="Left" 
   AbbreviatedMonths="True"></des:Calendar>
   
<des:Calendar id="Calendar3" runat="server" tabIndex="3" 
   FocusBorderColor="DarkGoldenrod" WeekendBackground="Beige" 
   JumpButtonHorzPlacement="Surround" HelpButtonHorzPlacement="Right" 
   WeekRowsCellSpacing="1" CommandButtonCellWidth="35px" 
   ShowOtherMonthDays="False" ShowSelectionButtonPlacement="FirstRow" 
   TodayButtonPlacement="FirstRow" EnableMonthYearPicker="False" 
   DayNameFormat="FirstLetter"></des:Calendar>
   
<des:Calendar id="Calendar4" runat="server" tabIndex="4" Width="200px" 
   FocusBorderColor="DarkGoldenrod" WeekendBackground="Beige" 
   CurrentDatePlacement="SecondRow" CurrentDateFormat="Short" 
   JumpButtonHorzPlacement="Surround" WeekRowsCellSpacing="2" 
   CommandButtonCellWidth="35px" ShowSelectionButtonPlacement="FirstRow" 
   TodayButtonPlacement="FirstRow" DayNameFormat="FirstTwoLetters" 
   ShowOtherMonthWeeks="False" ApplyButtonPlacement="SecondRow" 
   SpecialButtonPlacement="FirstRow" JumpButtonVertPlacement="BelowMonth" 
   ShowYear="BelowMonth" UpDownArrowKeyMode="ChangeAtBorders"></des:Calendar>
   
<des:Calendar id="Calendar5" runat="server" tabIndex="5" 
  JumpButtonHorzPlacement="Surround" WeekendBackground="Lavender" FocusBorderColor="DarkGoldenrod" 
  ShowWeekNumbers="True" MultiMonthColumnCount="2"
  CommandButtonCellWidth="35px" WeekRowsCellSpacing="2" CurrentDatePlacement="FirstRow" 
  TodayButtonPlacement="SecondRow" ShowSelectionButtonPlacement="SecondRow" 
  ClearButtonPlacement="SecondRow" >
  <PopupMonthYearPicker>
    <MonthYearPicker Format="FewYears" />
  </PopupMonthYearPicker>
</des:Calendar>
   
<des:Calendar id="Calendar6" runat="server" tabIndex="6" 
   IncrementalButtonHorzPlacement="None" FocusBorderColor="DarkGoldenrod" 
   WeekendBackground="Beige" EnableMonthYearPicker="False" 
   ShowDayHeader="False" ShowHeader="False"></des:Calendar>
   
Enter a des:&nbsp;<des:DateTextBox id="DateTextBox1" runat="server" tabIndex="7" 
   ShowPopupCalendar="False" ConnectToCalendarControlID="Calendar7" />
<des:Calendar id="Calendar7" tabIndex="8" runat="server" />