Introduction to the Calendar Control
| I l @ ve RuBoard |
Introduction to the Calendar ControlIn 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
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 SelectionModeOften, 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 CalendarNow 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 DisplayNow 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 |
