Home     About PeterBlum.com     Policies     Download a Licensed Product     Newsletter
Peter's Date and Time
Calendar Control
Back

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

The extensive feature list is shown below. Test the features yourself in the Demos provided. This highly customizable control has well over 200 properties.

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.
    Previous Month
    Next Month
    April 2024 Select a Different Month
    SunMonTueWedThuFriSat
    31123456
    78910111213
    14151617181920
    21222324252627
    2829301234
    567891011
    Previous Month
    Next Month
    April 2024 Select a Different Month
    SunMonTueWedThuFriSat
    31123456
    78910111213
    14151617181920
    21222324252627
    2829301234
    567891011
    The default calendar. The same calendar with alternative style sheet classes and different 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.
    Previous Year Previous Month
    Next Month Next Year
    April 2024 Select a Different Month
    SunMonTueWedThuFriSat
    31123456
    78910111213
    14151617181920
    21222324252627
    2829301234
    567891011
      
    Previous Month
    Next Month
    April 2024 Select a Different Month
    Previous Year
    Next Year
    SunMonTueWedThuFriSat
    31123456
    78910111213
    14151617181920
    21222324252627
    2829301234
    567891011
      
    Previous Month Next Month
    Previous Year Next Year
    April 2024 Select a Different Month
    SunMonTueWedThuFriSat
    31123456
    78910111213
    14151617181920
    21222324252627
    2829301234
    567891011

    Click on the down arrow to the right of the year to see the MonthYearPicker.

  • 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.
    Previous Month
    Next Month
    April 2024 Select a Different Month
     SunMonTueWedThuFriSat
    1431123456
    1578910111213
    1614151617181920
    1721222324252627
    182829301234
    19567891011
    Today Clear Show
    Sat, Apr 20, 2024

    Command buttons and week numbers.

  • Show multiple months. You can add up to 6 rows and columns of months.
    Previous Month
    Next Month
    April 2024 - June 2024 Select a Different Month
    April 2024
    SunMonTueWedThuFriSat
    31123456
    78910111213
    14151617181920
    21222324252627
    2829301234
    567891011
    May 2024
    SunMonTueWedThuFriSat
    2829301234
    567891011
    12131415161718
    19202122232425
    2627282930311
    2345678
    June 2024
    SunMonTueWedThuFriSat
    2627282930311
    2345678
    9101112131415
    16171819202122
    23242526272829
    30123456

  • 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.
    Help - show commands
    Previous Month
    Next Month
    April 2024 Select a Different Month
    SunMonTueWedThuFriSat
    31123456
    78910111213
    14151617181920
    21222324252627
    2829301234
    567891011

    Right click to see the context menu.

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

Fancy Demo

Previous Year Previous Month
Next Month Next Year
April 2024 - May 2024 Select a Different Month
April 2024
 SuMoTuWeThFrSa
1431123456
1578910111213
1614151617181920
1721222324252627
182829301234
19567891011
May 2024
 SuMoTuWeThFrSa
182829301234
19567891011
2012131415161718
2119202122232425
222627282930311
232345678
Today Clear Show

The ASP.NET markup for this demo:
<des:Calendar ID="Calendar9" runat="server" 
   AutoFormatYearChangeButtonPositions="Recommended"
   WeekendBackground="Beige" FocusBorderColor="DarkGoldenrod"
   WeekRowsCellSpacing="2" ShowWeekNumbers="True" 
   MultiMonthColumnCount="2" DayNameFormat="FirstTwoLetters" >
   <PopupMonthYearPicker>
      <MonthYearPicker Format="FewYears" />
   </PopupMonthYearPicker>
   <TodayCommand ShowField="FooterRow1" RegionInRow="Right" />
   <ClearCommand ShowField="FooterRow1" RegionInRow="Right" />
   <ShowSelectionCommand ShowField="FooterRow1" RegionInRow="Right" />
   <CurrentDateLabel ShowField="FooterRow1" RegionInRow="Center" />
</des:Calendar>


Back