Populating Form Inputs Using the Calendar Control, Part 2By James Avery
In Part 1 we looked at how to create a general calendar control and explained the aim of this article: to create a calendar pop-up to facilitate selecting a date for a form field text box. In this part we'll complete the application by examining how to "beautify" our calendar control and add the essential functionality.
Making the Calendar Control Pretty!
Since by default there is no selected date on the calendar we are going to capture the
OnDayRenderevent so we can change the background color of the current date to a different color. We could also change the font size, or make the date bold if we wanted to. We can easily accomplish this by adding an event handler to our control like so:
EventHandler is the name of the evant handler that you must provide
to handle the
OnDayRender event. Note that for my application I created a
Caledar1_dayrender to override handle this event.
There are a few more properties we may wish to set to make the calendar control more useful.
One important one is to set the
Day, which limits the user
to selecting a single day as opposed to a range of dates. There are a number of UI/stylistic properties
you may wish to set as well, such as
TitleStyle, etc. You should consult the documentation for more information on the
properties of the calendar Web control.
At this point, we have created a calendar control, set some properties, and specified an event handler for
Note that we still need to add code for our
Calendar1_SelectionChanged event handler and
Calendar1_DayRender method. Let's first look at the
We simply want to use this method to highlight the current date when the user loads the
calendar. To accomplish this, we simply need to add these three lines of code:
Notice that we use the properties
Cell which are
made available through the
DayRenderEventArgs object. The
represents the cell around the date and the day property is the date being rendered.
Now all that remains is the
Calendar1_SelectionChanged event handler, where we need to
Response.Write's, the output would appear before any other HTML content (including
<html> tag). So, to make our HTML "correct," we'll use a literal control
<head> ... </head> tags. Creating this literal control is easy
we will do is create a string,
build up this string so that it's end contents set the form's text box's value to the selected date
and the window is closed. This is accomplished with the following code in the
Calendar1_SelectionChanged event handler.
calendar.aspxin VB.NET code
calendar.aspxin C# code