Populating Form Inputs Using the Calendar Control, Part 2

By 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.

- continued -

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:

<asp:Calendar id="id" runat="server" OnSelectionChanged="eventHandler" OnDayRender="methodName" />

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:

<head> <asp:Literal id="Literal1" runat="server"></asp:Literal> </head>

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!

Happy Programming!

By James Avery

Attachments

Download the code for calendar.aspx in VB.NET code

Download the code for calendar.aspx in C# code