JavaScript Tip:
Easy JavaScript Calendars

by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.

People searching for information at Web sites want information to be delivered quickly and in an understandable format. Sites that have a lot of events to publicize sometimes have problems presenting the information clearly and completely. A simple JavaScript calendar can help you organize your information, add interactivity to your site, and increase the value to your visitors.

Publicize, Organize, and Search

Suppose you're in a strange town for the weekend and looking for something to do. Wouldn't it be great to just visit a local Web site, click on the date, and see a complete list of available entertainment options?

Or suppose your business offers meeting rooms and party/wedding reception space. You could include a calendar on your Web site so that customers could quickly check to see if space is available for their events.

This sample calendar that does just that. Click on the underlined dates to see events and times in the textbox below:

Coding Your Calendar

Before you begin the actual coding, organize your dates and put the information in date order. JavaScript doesn't require it to be in numeric order, but it makes maintenance much easier!

Step 1: Create an array that contains the month's events and place it in the HEAD section of your document.

This array is easy to update once the calendar is posted. If someone schedules an event on March 16th, you simply insert a line of code with the proper information and remember to update the calendar code in Step 3.

Step 2: Write a function that will pull the event information for the selected date. Place it after the array, directly before the "stop hiding script" line of code.

daySchedule is the day of the month that has an event scheduled. You don't have to include every day of the month in the array - unless you have events scheduled every day.

If you have a lot of dates, then the function in your HEAD section will get pretty large. You may want to consider placing the array and function in an external JavaScript file. That reduces the overall size of your page and also means that you can easily include an updated calendar on multiple pages in your site. Learn how to create and use external files. We left the code in the HEAD section on this page so you can easily view the source code for the calendar.

Step 3: Create the calendar and call the function inside the BODY section. We used a table for the calendar and a text box to display the event information. You could also display the information inside an alert box or a document.write statement - you're only limited by your coding expertise and your imagination!

The code below is just for the first 3 rows of the calendar. It's pretty repetitive, so you can tell from this sample how the whole code works. It's important to look at how the function gets called in the HREF tag. Each date with an event scheduled needs an HREF tag that calls the showDate function for that date. The code for the textbox is below the closing TABLE tag.

You can add formatting to make the table as large or as fancy as you want. Just remember to use colors that complement your site design and offer good contrast between text and the background.

Not A Promotion Substitute

This calendar will help people find information quickly, but it won't help search engine spiders index your pages. They aren't going to read the JavaScript you've included on your site or the information in your external JavaScript files.

If your organization is hosting a large event that needs plenty of publicity, put it on your calendar of course. But also include optimized text on your Web page that describes the event and uses appropriate keywords. That way, your site is search-friendly to both humans and spiders.

If you'd like to learn more about promoting your site in search engines, check our NetMechanic's Search Engine Tutorial in the Webmaster Resources section of our site.