This lesson will show you how to use the Calendar Server Control which will make use of the DateTime and TimeSpan types you’ve learned about. This Control is useful for providing a visual component that represents a date, in a web page, in a way that users are familiar with.
Step 1: Create a New Project
Either open the CS-ASP_016 Project file from the provided folder for this lesson, or follow the instructions below to set it up manually:
Create a new project called “CS-ASP_016” and set up a Default.aspx with the following Server Controls, and programmatic IDs:
Step 2: Add a Calendar Server Control
Now, let’s place a Calendar Server Control in between the text and buttons:
Select the Calendar, take a look at its Properties Window and set the ID to “myCalendar”:
Step 3: Formatting the Calendar Properties
While in the Properties Window, take note of the various built-in styles available:
Each of these styles will expand by clicking on the plus symbol, and more options are available within.
Also take note of some useful settings in the “Appearance” section:
Day formatting (single letter, three letters, full words, and so on).
HTML symbol for next Month (greater than, or “>”).
HTML symbol for the previous month (less than, or “<”).
Step 4: Styling the Calendar with Presets
You can access a selection of pre-formatted styles to choose from by clicking on the arrow to the right of the Calendar Control:
Step 5: Referencing the Calendar via Code
Now let’s turn to the Default.aspx.cs file and write in the following code for the getDateButton_Click event:
Remembering back to the lesson on DateTime, this uses the ToShortDateString() helper method for the DateTime value. This displays the value in the Month/Day/Year format (depending on your computer’s localization) in a string format, allowing us to print it to the resultLabel.
Now run the application, select a date, and the “Get Date” button to display the current date formatted as a string type.
Now, let’s have the “Set Date” button change the date of the Calendar when clicked. The selected date is shown by the highlighted box on the calendar control.:
Since the VisibleDate property can be set to any DateTime, let’s demonstrate this by writing the following in showDateButton_Click:
This changes the calendar’s selection to the date input, then shows the user that date, regardless of the month or year.
Step 6: Add the Option to Select an Entire Week
Go back to the Properties Window for the Calendar and adjust the SelectionMode property from the default (Day) to “DayWeek,” and notice how it adds a selection arrow for each week in the month.
Next, enter the following code that displays the currently selected date when you click on the “Selected Week” button:
When you run the application you will have to:
Select a week on the Calendar.
Click on the “Selected Week” button.
Step 7: Utilizing the SelectionChanged Event
One more thing worth noting is the event – visible in the Calendar’s Properties Windows – that fires whenever any selection is changed on the Calendar:
Click on the lightning bold in the Properties window, then double-click the SelectionChanged option to create and EventHandler for that.
Probably the simplest way to demonstrate what this event does is to write the following in the method attached to this event in Default.aspx.cs:
Now, when you run the application and click on individual dates, you will notice that the selected date is automatically displayed in the Label Control. Unlike the previous events that have been firing upon a button click, this event fires with the mere act of clicking on any given date on the Calendar:
Using the Calendar control, in conjunction with the DateTime and TimeSpan properties we’ve discussed, can be very useful. In fact, we’ll put them to use in the very next Challenge. Be sure to brush up on the last few lessons, and then proceed onto that challenge. Good luck!