Help & Support Register Login

Free, Easy Ways to Add a Calendar to Your Website

Brian Satterfield

A version of this article is available in Spanish courtesy of TechSoup partner CDI Chile.

Una versión de este articulo esta disponible en español por cortesía de CDI Chile, socio de TechSoup.

If you want to keep friends of your organization up-to-date on events, meetings, and deadlines, adding a calendar to your website is a must. But who has time to design and build a calendar by hand? Fortunately, there’s no need to do that, since numerous online tools make it easy to build, update, and publish a professional calendar on your nonprofit’s website. All you need is an Internet connection, a web browser, and a bit of spare time.

If you use a content management system (CMS) to manage your website, it may already offer a calendar module. If not, it’s easy to add a calendar using one of several online tools. As with an email-client calendar (such as Outlook or Thunderbird), you can add listings to a web-based calendar by creating an entry that includes the event's time, date, location, and other details; the main difference is that with a web-based calendar, you do this through your browser, not on your desktop.

All of the tools we discuss here can publish your events in iCalendar, a format used by numerous desktop, handheld, and online scheduling applications. This means that your nonprofit’s supporters can subscribe to your calendar with their scheduling application of choice and view your upcoming events without needing to visit your website.

In this article, we’ll discuss various methods of using your website to announce upcoming events. We’ll start with event badges and social networking sites, the easiest way to promote a single event. Next, we’ll look at various third-party tools for adding working calendar into your website. Finally, we’ll suggest calendar modules for nonprofits that use CMSes.

Event Badges and Social Networking Sites

free-easy-ways-to-add-a-calendar-01.pngWhile a full-fledged calendar will likely be the most appropriate choice for nonprofits that hold regular, recurring events, organizations that only hold occasional events might find that a monthly calendar is overkill. If this describes your situation, you can still keep your funders, volunteers, and supporters in the loop by adding a badge that shows upcoming events to your website.

Rather than displaying a full monthly calendar view, an upcoming-event badge simply lists a few events that will take place in the near future. Upcoming-event badges can be built using several free web services and easily integrated into your website via a simple HTML code cut-and-paste operation.

Social-events calendar Upcoming (which is a Yahoo! Company) provides a free tool for creating badges that display upcoming events. Upcoming badges pull an event's information from the site's database, but if your event isn't listed, you can add it after you sign up for a free account. After you add events to your list, you can choose from one of two badge styles, then select whether the badge should display the event's location. Upcoming badges can display either five or 10 future events and will automatically update themselves each time you add a new event.

If your nonprofit engages with the community through social media sites, be sure to use those sites to invite supporters to your events; that way, people who follow you through MySpace, Facebook, Hi5, or other networks can be invited to your upcoming events even if they don’t happen to visit your website. Using the iCalendar to Event application, you can turn the events on your calendar into Facebook events automatically. For more information, see Should Your Organization Use Social Networking Sites? and Facebook for Nonprofit Beginners.


Third-Party Calendar Services

If you’re not using a CMS, the easiest way to add a calendar to your website is with one of several third-party calendar services. In most cases, all you need to do to add the calendar is paste a snippet of text into your website’s code; you perform all of the customizations from the calendar provider’s website.

There are numerous third-party calendar services; we’ve chosen three to discuss here based on their popularity and their free price tag. Once you’ve determined what features are important for your calendar, you can select one of these services or seek out others.

Heavyweight Google offers a number of free web-based services, including one that allows you to create an online calendar and publish it on your website. To build a calendar using Google, you'll need to first create a free Google account.


A sample calendar created with Google Calendar.

Google Calendar's online interface provides several different ways to display upcoming events, including daily, weekly, and monthly views. No matter which view you choose, you can add a new event simply by clicking a date or time slot, naming it, and entering information such as the location and time.

If you want visitors to your site to be able to see your events, you'll need to set them as Public rather than Private. Whenever a visitor clicks a Public event displayed on your site, they will be taken to a Google page that contains the information you entered. You can also configure Google Calendar to permit your organization's volunteers or staffers to add or edit events.

After you've added upcoming events to a Google Calendar, you can use the service's Embeddable Calendar Helper to adjust the way it will look on your website. This includes selecting a background color for your calendar; choosing from five different sizes; and specifying whether the calendar will display navigation controls, a title, or the Google logo. After you've previewed the calendar and are satisfied with its appearance, you simply click an icon to generate its HTML code, which you can then copy and paste into your website.

Now every time you add a new event through Google Calendar's online interface, it will automatically appear on the calendar embedded on your site; however, if you want to make changes to the calendar's appearance or size, you'll need to generate new HTML code; copy and paste it into your site; and upload the file once again to your web server or hosting provider.

For more information on how to add a Google Calendar to your nonprofit’s website, check out this tutorial from Google. Here are some examples of nonprofits using embedded Google calendars:


A sample calendar created with 30 Boxes.

30 Boxes works very similarly to Google Calendar. 30 Boxes’ design is much less snazzy than Google’s, but it has many options for customization, including adding weather reports and photos from Flickr.

In addition to letting you embed the full calendar on your website, 30 Boxes also offers numerous widgets for displaying your calendar in social networking sites and other venues.

Though Localender offers a number of paid plans, its free service still allows you to add a functional calendar to your website. Note that the free service may display ads in the window where you create your calendar and on the calendar you embed on your own website. Localendar's premium paid services range from $10 to $130 per year and offer features like message boards and the ability to let users add entries to your calendar.

Localendar's interface offers daily, weekly, and monthly views. To add an event, click an icon in the service's control panel. After naming your event, you can add a description, links, and images using WYSIWYG editing tools similar to those found in many blogging and wiki platforms. If you set the event to be visible to the public, a small pop-up browser window with details will appear when a visitor clicks an event.

Though Localendar can only build a calendar in one standard size, it offers a number of other tools for customizing a calendar's appearance. For example, you can choose to include a local weather forecast for upcoming days, and you can also note federal or miscellaneous holidays. Localendar also gives you a choice of 15 sets of navigational icons, which visitors can use to scroll through the months of the year.

Additionally, Localendar lets you choose different colors for all text and background fields found on the calendar. For instance, you can denote workdays and weekends using two different colors, and you can also highlight any upcoming events by shading them in another color. If you don't have the time to customize your calendar, Localendar offers a handful of design schemes. Note that while these customization tools all function in Internet Explorer, some of them may not work well with other browsers such as Mozilla Firefox. For instance, at the time of this article's publication some of the fields that let you alter a calendar's colors were not available when using Firefox.

Once your calendar's preview looks suitable, you can choose from a few different basic display styles, such as a full monthly view or just the current week. After you select the option for embedding the calendar in a webpage, the service will automatically generate the HTML code that you can paste into your website. After the calendar you've added the calendar to your site, any changes you make — including new events and color changes — will immediately be reflected, making it unnecessary to upload a new file to your server.


CMS Calendar Modules

A CMS is a piece of software installed on a web server that delivers many types of information for your website in a consistent design. If you’re using a CMS, you’ll get the best results if you use a web calendar native to it. In their extensive report on open-source CMSes (free download, requires email address), Idealware found that of the four CMSes they studied (WordPress, Joomla, Drupal, and Plone), only Plone includes a calendar function out-of-the-box, while the other three support additional calendar modules. Many proprietary content management systems may also include a calendar function at no additional cost to you, so check with the vendor or consultant familiar with it to see if there’s one already included in the system you’re using.

The great thing about using a calendar that’s designed for your CMS is that it can interact with other parts of your site. For example, recently posted events can appear on your homepage or news page alongside new blog entries. Upcoming events can appear on a sidebar so that visitors can see them even if they weren’t specifically looking for them.

Here are some examples of nonprofit calendars made using CMSes’ calendar functions:

If you’re overhauling your nonprofit’s website and aren’t using a CMS, this might be a good time to consider it. The Idealware report mentioned above is an excellent place to start. In addition to thorough reviews of the four most popular open-source systems, the report also lists consultants well-versed in each CMS. For more information, see Comparing Open Source Content Management Systems and Joomla for Nonprofits.

Now that you've added a calendar or event badges to your website, it’s time to look into a few good RSVP tools to register all those people who want to attend those events.

Image: Calendar Pages, Shutterstock