Introduction to the Calendar Control

I l @ ve RuBoard

Introduction to the Calendar Control

In the previous chapters, you've seen how ASP.NET simplifies a lot of tasks that were code- intensive in previous versions of ASP. Perhaps no other control included in ASP.NET illustrates this point better than a databound calendar. For most developers, the amount of code and intermingled HTML involved for such a job in ASP justified the purchase of a third-party server component. Now ASP.NET brings to Web development the GUI manipulation of date values that VB, C++, and Java developers have always enjoyed. However, as you will find out, the ASP.NET Calendar control doesn't forfeit any of the fine-grain layout and display control Web developers take for granted.

Let's begin with a simple example by adding the control to the Web form:

 <asp:Calendar id="Cal" runat="server" /> 

That's all the code it takes to create a calendar in ASP.NET, as shown in Figure 7.5.

Figure 7.5. A simple calendar using the ASP.NET Calendar control.

Of course, at this point, the calendar is not very useful, so before we expand this example, let's look at the characteristics of the Calendar control. Take a moment to review this partial listing of the properties, methods , and events for the Calendar control in Table 7.4.

Table 7.4. Properties, Methods, and Events of the Calendar Control
Name Type Description
CellPadding Property Gets or sets the spacing between the cell borders and its contents
CellSpacing Property Gets or sets the spacing between cells
DayHeaderStyle Property Gets the current style for the day-of-the-week header row
DayNameFormat Property Gets or sets format for the day-of-the-week names
DayNameFormat Property Gets or sets format for the day-of-the-week names
DayRender Event Raised when a day cell is rendered
DayStyle Property Gets the current style for the day cells
FirstDayOfWeek Property Gets or sets the day of the week to display in the first column of the calendar
NextMonthText Property Gets or sets the text to display for the next month navigation link
NextMonthFormat Property Gets or sets the format for the month name for the Previous Month and Next Month buttons
NextPrevStyle Property Gets the current style for the Next and Previous selectors
OtherMonthDayStyle Property Gets the current style for the day cells from the previous month
PrevMonthText Property Gets or sets the text to display for the previous month navigation link
SelectedDate Property Gets or sets the currently selected date
SelectedDates Property Gets the collection of dates currently selected
SelectedDateStyle Property Gets the current style for the currently selected date
SelectionChanged Event Raised when the SelectedDate property changes in response to a user click
SelectionMode Property Gets or sets the format of the selection: Day, Week, Month
SelectMonthText Property Gets or sets the text for the month selection in the selector column
SelectorStyle Property Gets the current style for the week and month selectors
SelectWeekText Property Gets or sets the text for the week selection in the selector column
ShowDayHeader Property Gets or sets whether the day names header is displayed
ShowGridLines Property Gets or sets whether the calendar will display grid lines
ShowNextPrevMonth Property Gets or sets whether the next and previous month links are displayed
ShowTitle Property Gets or sets whether the calendar title is displayed
TitleFormat Property Gets or sets how the month name is formatted in the calendar title
TitleStyle Property Gets the current style for the calendar title
TodayDayStyle Property Gets the current style for the current date on the calendar
TodaysDate Property Gets the value of the current date for the calendar
VisibleDate Property Gets or sets the value of the date that determines which month to render
WeekendDayStyle Property Gets the current style for the weekend days on the calendar
VisibleMonthChanged Event Raised when the user clicks the next or previous month links

Armed with this information, let's expand the previous example and actually do something useful with the control. Normally, we're most interested in performing some action when the user changes the date selection in a calendar control. With the ASP.NET Calendar , we do this by handling the SelectionChanged event. Consider the example in Listing 7.8.

Listing 7.8 Using the Calendar control to gather user input (7cal02.aspx).
 <%@ Page language="C#"%> <html> <head> <title>Chapter 7: ASP.NET Rich Controls</title> <script language="C#" runat="server">     void Cal_Change(Object sender, EventArgs e){         BirthdayLabel.Text = "Your birthday is " + _         Cal.SelectedDate.ToShortDateString();     } </script> </head> <body>     <form runat="server">         Please enter your birthday:         <asp:Calendar id="Cal" runat="server" onselectionchanged="Cal_Change" />         <br>         <asp:label id="BirthdayLabel" runat="Server" />     </form> </body> </html> 

Figure 7.6 shows the output from Listing 7.8.

Figure 7.6. Using the Calendar control to gather user input.

In this example, we set up the event handler for the SelectionChanged event, which simply reads the SelectedDate property, to retrieve the user input. Because the SelectedDate property is of type System.DateTime , we can then use the built-in ToShortDateString method to return a formatted string to use for display in the label.

Using SelectionMode

Often, it is necessary for the user to input a range of dates instead of a single date selection. With the Calendar control, the SelectionMode property determines the selection behavior of the control. The property defaults to Day as you have just seen, but it also may be set to DayWeek , which allows both single days and single weeks to be selected, or DayWeekMonth , which allows single days, single weeks, or an entire month to be selected. This property also supports a fourth value of None if you would like to disable date selection. Listing 7.9 provides an example of selecting a date range with the Calendar control.

Listing 7.9 Allowing multiple date selection in the Calendar control.
 <%@ Page language="C#" autoeventwireup="false"%> <html> <head> <title>Chapter 7: ASP.NET Rich Controls</title> <script language="C#" runat="server">     void Cal_Change(Object sender, EventArgs e){         String VacationDates;         String dStart;         String dEnd;         dStart = Cal.SelectedDates[0].ToShortDateString();         dEnd = Cal.SelectedDates[Cal.SelectedDates.Count - 1].ToShortDateString();         VacationDates = dStart + " thru " + dEnd;         VacationLabel.Text = "Your requested vacation is " + VacationDates;     } </script> </head> <body>     <form runat="server">     Please enter your birthday:     <asp:Calendar id="Cal" runat="server"         onselectionchanged="Cal_Change"  selectionmode="DayWeekMonth"/>     <br>     <asp:label id="VacationLabel" runat="Server" />     </form> </body> </html> 

Figure 7.7 shows the output from Listing 7.9.

Figure 7.7. Using the Calendar with multiple date selection.

Because you can have only one birthday, we've changed this example to allow the user to request days off for an upcoming vacation. The only modifications necessary are to set the SelectionMode of the control, in this case DayWeekMonth , and then to modify the event handler to read the selected dates. The SelectedDates property returns a collection of System.DateTime values, which we can traverse using a For...Next loop or, as we did in this case, by reading the first and last values to get the date range. We can then display the values, pass them to a database query, or update other controls on the form.

Databinding and Calendar

Now that we've seen how to allow the user to select one or more dates with the Calendar control, let's look at how to set the default selection. In each of the samples so far, the calendar control has no default SelectedDate . Often, we would like to make the current date or the value of a database record the default selection. This can be accomplished easily by data binding the SelectedDate property to another variable, the value of another control, a database record, or an expression as in this example:

 <asp:Calendar id="Calendar1"    runat="server"    SelectedDate="<%# Convert.ToDateTime(DateTime.Now) %>"> </asp:Calendar> 

To activate the data binding, simply call the DataBind method:

 Calendar1.DataBind(); 

Modifying Calendar Display

Now that you've seen how to use the Calendar control to display and input date values, let's look at some of its advanced layout features. Up to this point, we've been dealing with the control strictly from a functional perspective and haven't modified its display. Listing 7.10 illustrates how we can modify the look of the calendar control to achieve an almost infinite number of display possibilities.

Listing 7.10 Changing the look of the Calendar control.
 <%@ Page language="VB" autoeventwireup="false"%> <html> <head> <title>Chapter 7: ASP.NET Rich Controls</title> </head> <body>     <form runat="server">         <h3>Using Calendar</h3>         Modifying the look of the Calendar control         <br><br>         <TABLE BORDER="0" CELLSPACING="1" CELLPADDING="1">             <TR>                 <TD ALIGN="CENTER">                     Default Styling                     <asp:Calendar id="Cal" runat="server"                         selectionmode="DayWeekMonth"/>                 </TD>                 <TD ALIGN="CENTER">                     Small                     <asp:Calendar                         id="Cal2"                         runat="server"                         daynameformat="FirstLetter"                         titlestyle-font-size="8pt"                         titlestyle-font-names="Verdana"                         titlestyle-font-bold="True"                         todaydaystyle-backcolor="Gainsboro"                         todaydaystyle-font-bold="True"                         daystyle-font-size="8pt"                         daystyle-font-names="Verdana"                         dayheaderstyle-font-size="8pt"                         dayheaderstyle-font-bold="True"                         dayheaderstyle-font-names="Verdana"                         selectionmode="DayWeekMonth"                         nextprevstyle-font-names="Webdings"                         selectorstyle-font-names="Verdana"                         selectorstyle-font-size="6pt"                         nextmonthtext="4"                         nextprevstyle-font-underline="False"                         prevmonthtext="3"                     />                 </TD>             </TR>             <TR>                 <TD ALIGN="CENTER" colspan="2">                         Verbose:                         <asp:Calendar                             id="Cal3"                             runat="server"                             selectionmode="DayWeekMonth"                             nextmonthtext="Next Month"                             prevmonthtext="Previous Month"                             daynameformat="Full"                             titleformat="MonthYear"                             dayheaderstyle-backcolor="#EEEECC"                             titlestyle-backcolor="#009900"                             titlestyle-forecolor="White"                             selectorstyle-backcolor="#EEEECC"                             selecteddaystyle-backcolor="#009900"                             nextprevstyle-forecolor="White"                             othermonthdaystyle-backcolor="LemonChiffon"                             font-size="8pt" font-names="Verdana"                             selectmonthtext="Select Month"                             selectweektext="Select Week"                         />                 </TD>             </TR>         </TABLE>     </form> </body> </html> 

Figure 7.8 shows the output from Listing 7.10.

Figure 7.8. Changing the look of the Calendar .

Please note that in this example, all the display properties are set explicitly from within the Calendar control declaration. Many developers with Windows GUI experience will find this syntax natural because each display attribute is its own property for the control. However, most stylesheet-savvy Web developers might prefer a second method for controlling the display of the Calendar control (as well as most ASP.NET controls).

I l @ ve RuBoard


Asp. Net. By Example
ASP.NET by Example
ISBN: 0789725622
EAN: 2147483647
Year: 2001
Pages: 154

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net