Calendars for Your Website

There are many reasons why you may want to include a calendar on your personal or organization's website. In the case of a personal site, you could have a private page displaying a calendar reflecting your own or your family's schedule, including upcoming vacations. In the case of a website for a corporation or nonprofit organization, there are countless uses for calendaring functionality, such as project planning and reporting.

To make all this possible, you do not have to create any calendaring software yourself, nor find the time to learn how, because there are numerous calendar programs already available — some of which are outstanding, and many of which are free of charge. In this article, I will examine two of the most useful solutions on the market, and explain where you can download and use them. In addition, we will look at some screenshots, to give you an idea of how they could appear on your own site.

Before you begin the process of obtaining, installing, and configuring any given calendar program, you need to take into account the underlying architecture that your website is built upon. There are two major alternatives: Either your site was built — by you or by someone else — using a content management system (CMS), or it was built from scratch utilizing a Web scripting language such as PHP or ASP, or static HTML, with no scripting utilized.

Content and Calendars

Most Internet users may be unfamiliar with content management systems, even though these folks may frequently visit websites that were constructed using a CMS. To put it simply, think of a CMS as a framework that allows a Web developer to create a site for you more efficiently than if it were done by hand. According to The CMS Matrix, there are at least 1083 CMSs that your developer may have used to create your site. Because of this huge number of possibilities, and the space limitations of an article such as this, I can only focus upon a calendar solution for just one of the more popular CMSs — in this case, the one favored by many professional Web developers, Drupal.

Assuming that your Drupal-based site is up and running, and either you or your developer knows how to enhance its functionality through the use of third-party modules (referred to as "contributed modules"), then there are at least two available modules that you can leverage for adding a calendar to your site. The Event module is a capable tool, but in this article I will instead examine the aptly-named Calendar module, partly because it is probably the first option that experienced developers turn to when they want to add calendaring capabilities to a Drupal-based site.

Install and enable this and all other modules mentioned here, just as you would for any other Drupal contributed module: Download the latest stable version from the Drupal.org modules area; unzip the installation file (it will have the extension ".tar.gz"); save the module in the sites/all/modules directory; enable the module at Administer > Site building > Modules (admin/build/modules); and configure the given module as specified in the installation instructions.

After the Date module has been installed in the appropriate directory, you will find it listed in the "Date/Time" section of admin/build/modules. Our solution requires a number of other modules before it can be implemented: Views and Date, as well as Date API and Date Timezone, which are both part of Date. When all five modules are enabled, the Date/Time section of your admin/build/modules should look like the screenshot below.

Three other needed modules are CCK, Views, and Views UI (part of Views).

Go to Administer > Site configuration > Date and time (admin/settings/date-time), and set the time zone to the appropriate option. Then go to Administer > Content management > Content types (admin/content/types), and create a new content type for events. In this example, I will name it "Calendar event", of type "event". Under "Workflow settings", it is best to disable automatic promotion to your site's front page.

Then add a new field to this new content type. I will name ours "Event date and time", with the field name suffix set to "event_datetime", and the data type set to "Datetime". If the form element is set to "Text Field with custom input format", then users will have to format the input dates perfectly; thus, it is best to use "Select List", the default, so they can choose a date using drop-down list boxes.

The field settings on the subsequent page can for most purposes be left at their default values, except under "Global settings", make the field required. For events spanning multiple days, change the "To Date" to Optional or Required.

Now you are ready to create a test event, at Create content > Calendar event (node/add/event).

This last phase can be the trickiest, and the most likely place where you might go astray. Go to Administer > Site building > Views (admin/build/views). Enable "Default Node view: calendar (Calendar)", and clone it. Feel free to change the default values as needed. Clicking the Next button will take you to the view edit screen (admin/build/views/edit/calendar). In the Arguments panel, click on "Date: Date (node)". Under "Date field(s)", near the bottom of the page, uncheck "Node: Updated date", check "Content: Event date and time (field_event_datetime)", and click the Update button. The purpose of all this is to set the calendar to use the start time of your event.

In the Fields panel, add a new field of type "Content: Event date and time (field_event_datetime)". In the configuration panel that appears next, stick with the default values, except set Label to "None". Edit the "Node: Updated date" field, and set the label to "Exclude from display". In the Filters panel, add a new filter of type "Node: Type". On the configuration screen that next appears, leave the operator as "is one of", but change the node type to "Calendar event". In the Sort criteria panel, add a new criterion of type "Content: Event date and time (field_event_datetime)".

At this point you are ready to begin adding events to your calendar. Go to Create content > Calendar event (node/add/event), and define a couple test events. To confirm that your newly-created calendar view works, go to the calendar page on your site (?q=calendar).

We see that today, the 8th, has a blue background, and the event days — both the single-day event on the 17th, and the three-day event the next week — are colored yellow. Admittedly, this first cut at a calendar is not fancy, but further styling of the page can be done without much difficulty. To learn more about the capabilities of the Calendar module, check its page, which has links to some tutorials. Also, there is an excellent DrupalTherapy screencast demonstrating how to use the Date and Calendar modules.

Calendars by Hand

If your website is not powered by a CMS such as Drupal, but instead is displaying static HTML pages or dynamic ones generated by scripts that pull their content from static files or values in a database, you still can have attractive calendars on your website. There are several calendar software packages available — some free, some paid, and some offering a combination of both options. An example of the latter is localendar, which provides both free and premium plans. Under the free plan, you get personal and group calendars, with search functionality, event announcements, guest calendars, custom styling, embedded weather, and integrated RSS news feeds. The premium plan adds import/export capabilities, no ads, calendar merging, custom sharing, task editing, a printable view, and a discussion forum.

You can try the free plan, to create a calendar similar to the Drupal one I did above. After you obtain a free account, login to the workspace, where you will start with an empty calendar for the current month.

Click on the "Add Event" button in the left-hand control panel.

The user interface is quite straightforward, and allows you to set the title, a longer description, a background color (from a palette, or a custom hexadecimal RGB value), the event date and start time, the duration of the event, whether it is private or public, a ZIP code, a category, an image that you can upload, and event repetition (with plenty of control over the settings). You can even request to receive an email message and/or pager message, to remind you of the event, anywhere from five minutes to two weeks before it takes place.

Remarkably, despite all of these options, there did not appear to be a way to perform a rather simple task — namely, starting a multi--day event at a certain time on the first day, and having the event end at a different time on the last day, without messing up all the start and end times. The system insisted that those start and end times be reflected every single day that the event is scheduled (demonstrated in the screenshot below).

Because localendar hosts the calendars on their own servers, they allow you to link from your site to any calendar that you have created on theirs. That poses the problem of how to present your calendar within a page on your own site. Presumably you could place it in an HTML iframe tag (I won't go into the details of that here) or, if the calendar does not need to be updated dynamically and is instead fixed, then you could put the HTML rendered by localendar in a page on your own site.

The two calendar solutions outlined above only scratch the surface of the options available to you, as a website owner. Regardless of how your site has been built — or how you would like your future site to be built — there is always a way to add a calendar to your Web presence.