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 OnDayRender event 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:
Here the 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
function named 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 SelectionMode to 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 BorderColor, BackColor,
DayNameFormat, 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
the OnSelectionChanged and OnDayRender events.
<%@ Page Language="vb" %>
<script runat="server">
Private Sub Calendar1_SelectionChanged(sender As Object, e As EventArgs)
'TODO: Add code to emit client-side JavaScript to auto-populate
' the date text field in the form
End Sub
Private Sub Calendar1_DayRender(sender As Object, e As DayRenderEventArgs)
'TODO: Add code to render the selected day
End Sub
</script>
<form runat="server">
<asp:Calendar id="Calendar1" runat="server"
OnSelectionChanged="Calendar1_SelectionChanged"
OnDayRender="Calendar1_dayrender"
ShowTitle="true" DayNameFormat="FirstTwoLetters"
SelectionMode="Day" BackColor="#ffffff"
FirstDayOfWeek="Monday" BorderColor="#000000"
ForeColor="#00000" Height="60" Width="120">
<TitleStyle backcolor="#000080" forecolor="#ffffff" />
<NextPrevStyle backcolor="#000080" forecolor="#ffffff" />
<OtherMonthDayStyle forecolor="#c0c0c0" />
</asp:Calendar>
<asp:Literal id="Literal1" runat="server"></asp:Literal>
</form>
Note that we still need to add code for our Calendar1_SelectionChanged event handler and
Calendar1_DayRender method. Let's first look at the Calendar1_DayRender method.
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:
Private Sub Calendar1_DayRender(sender As Object, e As DayRenderEventArgs)
If e.Day.Date = DateTime.Now.ToString("d") Then
e.Cell.BackColor = System.Drawing.Color.LightGray
End If
End Sub
Notice that we use the properties Day and Cell which are
made available through the DayRenderEventArgs object. The Cell property
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
emit client-side JavaScript code to update the form and close the pop-up. While we could simply use
Response.Write's, the output would appear before any other HTML content (including
the <html> tag). So, to make our HTML "correct," we'll use a literal control
inbetween the <head> ... </head> tags. Creating this literal control is easy
enough:
We will use this literal control to hold our JavaScript after we create it.
Now lets look at creating the JavaScript to pass the value back to the form. The first thing
we will do is create a string, strJScript, to hold our JavaScript code. Next, we will
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.
Private Sub Calendar1_SelectionChanged(sender As Object, e As EventArgs)
Dim strjscript as string = "<script language=""javascript"">"
strjscript &= "window.opener." & _
Httpcontext.Current.Request.Querystring("formname") & ".value = '" & _
Calendar1.SelectedDate & "';window.close();"
strjscript = strjscript & "</script" & ">" 'Don't Ask, Tool Bug
Literal1.Text = strjscript 'Set the literal control's text to the JScript code
End Sub
Here we round out the event handler by setting the text of our literal to
the dynamically generated client-side JavaScript code. This has the effect of executing this
client-side JavaScript code when the page is rendered. So when a user selects a date this event
will fire and the JavaScript will be created. As the page is rendered the JavaScript will be run,
the value of the selected date transferred to the form's text box, and the calendar page closed. Neat!
