Creating a Page to View the Calendar

Previous page
Table of content
Next page


Now that you re able to enter appointments, of course you want to be able to view them, too. To accomplish this task, you ll create a page that again uses the Calendar control. Naturally, you ll be able to click a specific day in the calendar and then view the appointments you have for that day, if any. You ll also program the Calendar control so that it shows you the days on which you have appointments.

Before we launch into creating the page and programming it, let s review how the calendar display page will work. Figure 14-2 shows a picture of the page when it s running in the browser.

click to expand
Figure 14-2: A page that uses the Calendar control to display appointment information.

Both functions of the page highlighting appointment days and displaying the appointments for a specific day involve reading appointment information from the Calendar table in the database. However, the two functions use the database in different ways, and in fact, because the two functions are essentially independent of one another, it makes sense to break down the description of how to create the Calendar viewing page into two parts. You ll start with highlighting the days on the calendar that have appointments. Before programming the calendar, however, you need to create the page.

Create the  ViewCalendar.aspx page

  1. In Web Matrix, create a new page, and name it  ViewCalendar.aspx.

  2. Add a heading by typing View Appointments. If you want, add explanatory text such as Highlighted dates show days with appointments. Click a day to see the appointments for that day.

  3. From the Web Controls tab of the Toolbox, drag a Calendar control onto the page. In the Properties window, click the Auto Format link and select a formatting scheme that you like. When you ve finished, the page will look like this:

    click to expand

Now you re ready to write code to highlight appointment days in the calendar.

Highlighting Appointment Days in the Calendar

We want the days containing appointments to be displayed in some fashion in the Calendar control. As you saw earlier with the  CalendarEntry.aspx page, when you click a day in the calendar, the Calendar control displays the selected day in a distinct color or font. (The exact way in which the Calendar control displays a selected day depends on the scheme you selected in the Auto Format window.) To highlight days with appointments, therefore, you ll programmatically select them in the Calendar control.

In outline, the procedure for highlighting days is as follows: You ll query the database to read all the appointments from the Calendar table. As usual, you ll have Web Matrix write the query code for you. For this example, you ll have Web Matrix use a data reader object. As I explained in Chapter 9, a data reader object allows you to read one record at a time from the result set returned by a query. Using the data reader, you ll go through the query s result set, extract each date from the appointment records, and then add that date to the list of selected dates in the calendar. To start, you ll need to have Web Matrix generate the data reader code.

Generate a data reader for reading appointments

  1. Switch to Code view.

  2. From the Toolbox, drag a Select Data Method element onto the page. Connect to the WebMatrix database.

  3. In the Query Builder, select the Calendar table.

  4. Under Columns, select CalendarDateTime. To highlight dates in the calendar, the date is the only information you need from the Calendar table. Click Next.

  5. When Web Matrix prompts you for the name of the method to generate, name the method GetAppointments. Select the DataReader option button, and then click Finish. Web Matrix creates the GetAppointments method in your page.

You can call the GetAppointments method to execute the query and return a data reader object. The next step is to write code that calls this method and then loops through those appointments to select the corresponding days in the Calendar control. I recommend that you accomplish this task in a subroutine, because you ll call the code at different times in the page, as I ll explain shortly.

To track selected dates, the Calendar control supports a SelectedDates property, which is a collection. You can select a date in the calendar by adding the date to the SelectedDates collection, much the way you added items to the slideshow list box in Chapter 12. Add the following code to the page to set the Calendar control s selected dates:

Sub SetSelectedDates(     Dim appointmentReader As System.Data.SqlCl ient.SqlDataReade     Dim appointmentDate As DateTim     appointmentReader = GetAppointments(     While appointmentReader.Rea         appointmentDate = appointmentReader(0         Calendar1.SelectedDates.Add(appointmen tDate     End Whil End Sub

You first create a variable of type SqlDataReader, which will hold the data reader created by the generated code. When you declare a variable for a data reader that will read data from MSDE or SQL Server, you use the lengthy type System.Data.SqlClient.SqlDataReader. Unlike some data objects such as datasets, data readers are particular to the provider you re reading data from, which is why you need to declare the data reader as part of the namespace for SQL Server objects.

You execute the query and initialize the data reader by calling the GetAppointments method generated earlier. You then create a variable named appointmentReader to hold each record as you work with it. To get an individual record, you call the data reader s Read method, which loads the next record into the appointmentReader variable and moves forward in the result set. You can use a While loop with a data reader, because when the reader gets to the end of the result set, the reader returns False, and you can exit the loop.

When you generated the GetAppointments method earlier, I told you that you needed only the CalendarDateTime column from the Calendar table. As a result, the record returned by the data reader has only one value in it, which we can get by accessing value 0 of the appointmentReader variable. The last task in this part of the code is to call the Add method of the Calendar control s SelectedDates collection, as I described earlier. When the loop has finished, the SelectedDates collection will have been populated with all the dates from the Calendar table, and the Calendar control will be ready to display highlighted days for appointments.

You re still missing one small step, however. Although you ve created a subroutine to highlight days in the Calendar control, you haven t called that subroutine yet. When do you want the highlighted dates to be displayed? When the page is first displayed, of course. So you need to call the SetSelectedDates subroutine from the Page_Load handler. You need to set the selected dates only the first time the page runs, because in subsequent postbacks the Calendar control will maintain its own state. The code to set the selected dates looks like this:

Sub Page_Load(     If Not Page.IsPostBack The         SetSelectedDates(     End I End Sub

After you enter this code, test the page. You ll see a highlighted day for any date with an appointment. You can click the month links in the calendar, too, to view highlighted days in any month.

Now that you ve completed your first task, highlighting appointment days, you can proceed to the second task, displaying appointment details when users click a day in the calendar.

Displaying Appointment Details

When users click a day in the calendar, you want to show them the appointments they have for that day. To do so, you ll need to query the database to get all the appointments for a specific day. (As part of the query, you ll also want to sort the appointments by time.) The easiest way to display data, as you know, is to use the MxDataGrid control, and that s the control you ll use in this page.

The query that gets the appointments for only one day must obviously be a parameterized query. You ll use the same technique that you used in Chapter 13 that is, you ll use a SqlDataSourceControl control and configure the control with a SQL Select statement containing a Where clause to find the appropriate records. Then you ll write code to pass the correct values to the SQL Select statement.

Let s start by adding controls to the page and configuring them. Figure 14-3 shows you what the page will look like in Design view when you ve finished adding the controls.

click to expand
Figure 14-3: The ViewCalendar page after you ve added the controls to display appointments.

Add controls to the page to display appointments

  1. In Design view, position the pointer below the calendar and type the text Appointments for as a caption.

  2. Drag a Label control from the Toolbox and drop it after the text you typed. Set the control s ID property to labelSelectedDate, and set its Text property to [Please select a date].

  3. Drag the Calendar table from the Data window onto the page and drop it below the text you just typed. Web Matrix creates the SqlDataSourceControl control and the MxDataGrid control and configures the controls properties. The property settings are not exactly the ones you need, however, so you ll change them.

  4. Select the SqlDataSourceControl control, and in the Properties window, change the control s SelectCommand property to the following:

    SELECT * FROM  Calendar Where (CalendarDateTim e >= @startdate) AN     (CalendarDateTime < @enddate) Order By Cal endarDateTime

    You ve added the Where and Order By clauses. Notice that in the Where clause, you re searching within a range of dates rather than simply selecting a specific date. The range search is required because you re searching both date and time. In a moment, when you write the code for appointments, I ll explain why you need a range in the Where clause.

  5. Select the MxDataGrid control, and in the Properties window, set the control s AllowPaging and AllowSorting properties to False.

  6. In the Fields property box, click the ellipsis button to display the MxDataGridField Collection Editor dialog box.

  7. Select the first BoundField object in the list (the one that references the CalendarID column), and click the Remove button to delete the object. You don t need to display the ID of individual appointments.

  8. Select the BoundField object for the CalendarDateTime column. Change the object s HeaderText property to Time.

  9. Change the DataFormatString property to {0:t}, as shown on the following page:

    click to expand

    Remember that the CalendarDateTime column contains both the date and the time for the appointment, but in this grid column, you want to display only the time. The format expression {0:t} converts a date-time value to a short time value, one that shows only the time portion, and moreover, shows the hours and minutes but no seconds. (I mentioned formatting expressions briefly in Chapter 8, when you were formatting the hit counter to be zero-padded.)

  10. Select the BoundField object for the Appointment column. Open the node for ItemStyle and set the Width property to 300px. If you don t set this property, the Appointment column will be too narrow.

  11. When you ve finished, click OK.

The controls for displaying appointment details are in place. Now you need to add code that will determine what day the user has clicked and make the appointment details appear in the grid. When users click a day in the calendar, the Calendar control raises a SelectionChanged event, so you ll display appointment details in the handler for that event. In Design view, double-click the Calendar control, and then add the following boldfaced code:

Sub Calendar1_SelectionChanged(sender As Objec t, e As EventArgs     DisplayAppointments(Calendar1.SelectedDate) End Sub

As with the code you wrote to set the calendar s selected dates, I recommend that you put the code for displaying appointment details in a subroutine, because you ll need to be able to call the code at different times. The subroutine will be named DisplayAppointments, and you ll write it in a moment. In the SelectionChanged handler, meantime, you can add the subroutine call, passing it the date that the user clicked in the Calendar control.

And now let s write the DisplayAppointments subroutine so that the appointment date is passed into the subroutine. The query that actually extracts the appointment details is in the SqlDataSourceControl control that you configured earlier with a parameterized Where clause. So you need to set the parameter values the way you learned to do in Chapter 13. Add the following code to your page:

Sub DisplayAppointments(dateToDisplay As DateT ime     labelSelectedDate.Text = dateToDispla     SqlDataSourceControl1.Parameters("@startda te") = dateToDispla     SqlDataSourceControl1.Parameters("@enddate ") =          dateToDisplay.AddDays(1     MxDataGrid1.DataBind(     Calendar1.SelectedDates.Clear(     SetSelectedDates( End Sub

Notice how you set the startdate and enddate parameters for the query. As I noted earlier, the CalendarDateTime column in the database contains both the date and the time (as in 11/18/2002 9:00:00). You don t have times to work with in your search, only dates, such as the date that the user clicks in the calendar. If a DateTime value has no time portion, MSDE and SQL Server assume a time portion of 00:00.00, meaning midnight. For example, if a user clicks November 25 in the calendar, the DateTime value you have to work with is 11/25/2002 00:00:00. In the query, therefore, you created a Where clause that searches a range, and you set the start of the range to midnight of the start date and the end of the range to midnight of the start date plus 1. To search for appointments on November 25, you search for appointments greater than or equal to 11/25/ 2002 00:00.00 and less than 11/26/2002 00:00.00.

After you ve set the parameters for the query in the SqlDataSourceControl control, you call the MxDataGrid control s DataBind method, which has the indirect effect of executing the query in the SqlDataSourceControl control. The DataBind method also binds the grid to the results of the query, which will display the appointments for the selected date.

Probably the least intuitive lines in the code I just showed you are the last two lines:

Calendar1.SelectedDates.Clear( SetSelectedDates()

These lines are necessary because of the way the Calendar control is designed. When the user clicks a day in the calendar to view the appointments for that day, the Calendar control assumes that the clicked date is now the selected date. But you re using the SelectedDates collection for a different reason namely, to highlight the days with appointments so you don t want the Calendar control to reset the selected date. Therefore, when the user clicks a day, you grab that date in the SelectionChanged event handler and pass it to your subroutine. As soon as you ve used the selected date, you clear the date that the user has selected and then reload the calendar with the appointment dates, as you did when the page first loaded. I said earlier that you would need to call the code for setting highlighted dates from more than one place; in addition to calling SetSelectedDates from the Page_Load handler, you call it in the DisplayAppointments subroutine, after you ve displayed appointment details.

You have only one task left! When the page runs the first time, you want to show any appointments for today. Add the following boldfaced line to the Page_Load handler:

Sub Page_Load(     If Not Page.IsPostBack The         SetSelectedDates(         DisplayAppointments(Today)     End I End Sub

Now test the page. Not only will you see highlighted dates in the calendar, as you did earlier, but when you click a highlighted date, you ll see the appointments for that date.


Previous page
Table of content
Next page
Microsoft ASP. NET Web Matrix Starter Kit
Microsoft ASP.NET Web Matrix Starter Kit (Bpg-Other)
ISBN: 0735618569
EAN: 2147483647
Year: 2003
Pages: 169
Authors: Mike Pope
BUY ON AMAZON
CompTIA Project+ Study Guide: Exam PK0-003
Java for RPG Programmers, 2nd Edition
The Java Tutorial: A Short Course on the Basics, 4th Edition
Junos Cookbook (Cookbooks (OReilly))
Lean Six Sigma for Service : How to Use Lean Speed and Six Sigma Quality to Improve Services and Transactions
Microsoft Office Visio 2007 Step by Step (Step By Step (Microsoft))
flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net
Privacy policy