TimArcher.com A blog about technology...and more.

One useful tool for web applications is a simple calendar control that you can call from your date input form fields. Having the ability to popup a calendar and select the date makes it easier for users who have to enter dates for future appointments, tasks, and reminders. By doing this the user doesn’t have to look at a separate calendar outside of your web application. Years ago I spent hours writing my own calendar control to do this, and quite frankly, I lost the code and didn’t want to have to rewrite it for my most recent project. So off to Google I went to begin my search. Within a few minutes I had found a control that does exactly what I want from Matt Kruse’s Javascript Toolbox.

Matt Kruse’s examples are very easy to follow, and I think his JavaScript tools are top notch material. I intend to integrate his JavaScript table sorting code into my application next. Below I will detail the steps I performed to get the calendar control working:

1. First download the Calendar Popup source from Matt Kruse’s Javascript Toolbox. Make sure you get the source labeled as combined.
2. Put the downloaded JavaScript file named CalendarPopup.js into the root directory for your website on your web server.
3. Click here to download the CSS file used to style the calendar up nicely. Put this file into the root directory for your website on your web server.
4. Now make your page. The source code to embed this calendar control in your app is really simple. First include this text in the head of your HTML document:
   

     <link type="text/css" href="CalendarStyle.css" rel="stylesheet" />
     <TITLE>JavaScript Toolbox - Calendar Popup To Select Date</TITLE>
   
     <SCRIPT LANGUAGE="JavaScript" SRC="CalendarPopup.js"></SCRIPT>
     <!-- This prints out the default stylehseets used by the DIV style calendar.
          Only needed if you are using the DIV style popup -->
     <SCRIPT LANGUAGE="JavaScript">document.write(getCalendarStyles());</SCRIPT>
   
     <SCRIPT LANGUAGE="JavaScript">
       var cal = new CalendarPopup("calendarDiv");
       cal.showNavigationDropdowns();
       cal.setCssPrefix("CALPREFIX");
     </SCRIPT>
   

5. Create the form field in the body of your HTML which will call the calendar control defined above.

   <FORM NAME="form1">
     <INPUT TYPE="text" NAME="contactDate" VALUE="" SIZE="10">
     <A HREF="#" 
     onClick="cal.select(document.forms['form1'].contactDate, 'anchor1', 'MM/dd/yyyy'); return false;"
        NAME="anchor1" ID="anchor1"><img src="calendar_icon.png" border="0"/></A>
     </FORM>
   

6. Lastly, you need to create the div that will be used to show the calendar control. I put this next line of code at the end of my page before the closing body tag:

     <DIV ID="calendarDiv" STYLE="position:absolute;visibility:hidden;background-color:white;layer-background-color:white;"></DIV>
   

A working demonstration of this calendar control can be seen in the iframe below. Click on the icons to the right of the date fields to trigger the calendar popup.

The code for this example can be downloaded by clicking here and viewing the source of the webpage.