Three Free, Easy Ways to Add a Calendar to Your Web Site

Putting a calendar on your Web site can be a great way to keep supporters up-to-date on important events, meetings, and deadlines. But if the thought of building a calendar from scratch overwhelms you, take heart — nowadays, you don't need Web-building skills, or even funds, in order to add a calendar to your site. All you need is an Internet connection, a Web browser, and a bit of spare time.

A handful of relatively new, free online services allow just about anyone with basic Internet experience to design and customize a functional calendar right from their Web browser. Below, we'll show you how you can create and add a calendar to your Web site using three free services: Google Calendar, Localendar, and Spongecell.

How Web-Based Calendar Services Work

As with an email-client calendar (such as Outlook or Eudora), 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.

To publish a Web-based calendar using the services listed below, all you have to do is add a small snippet of automatically generated code to your Web site. No programming languages or back-end database work is required; you can simply cut and paste the code to the desired Web page.

Different Web calendar services offer different features, however; read on to learn more about which option might best meet your nonprofit's needs.

Google Calendar

Search 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 Web site. To build a calendar using Google, you'll need to first create a free Google account.

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, then entering information such as the location, time, and other details.

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 Web site. 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 Web site.

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.

Localendar

Though Localender offers a number of paid plans, its free service still allows you to add a functional calendar to your Web site. 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 Web site. 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 WYSWYG 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 your 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 Web page, the service will automatically generate the HTML code that you can paste into your Web site. Once 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.

Spongecell

Spongecell's user interface offers a number of different views, from a daily view to a six-week view. After creating a Spongecell account, you can add events by clicking a certain day or time slot or by clicking an "Add Event" link in the calendar interface. You can give each event a title, a location, notes, as well as related URLs and images. Like Google Calendar and Localendar, Spongecell lets you set events that are visible to the public, as well as those that only the creator can see. Visitors who click on public events will be taken to a Spongecell page that contains more information.

After you choose the option for adding the calendar to your site, Spongecell will bring up a page that lets you customize the appearance of your calendar. You can choose to show or hide event times, as well as specify how many weeks in advance the calendar should display. Spongecell allows you to resize the calendar by entering the desired pixel dimensions, and you can also change the text's font size. Finally, you can customize the calendar's color scheme by browsing a palette and assigning desired colors to dates, events, and text.

Once you've configured the calendar's preferences and previewed it, you simply copy and paste the HTML code found at the bottom of the page into your organization's Web site. As is true with Google Calendar, new events you add at the Spongecell site will immediately appear on the calendar posted on your Web site once you've pasted that small snippet of code to your site. But if you make design changes, you will have to generate new HTML code, paste it into your Web page, and re-upload the code to your Web server.

Event Badges: An Alternative to Calendars

While 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 Web site.

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. Similar to online calendars, upcoming-event badges can be built using several free Web services, then easily integrated into your Web site via a simple HTML code cut-and-paste operation.

A free Web service called CalendarHub offers an upcoming-event badge that displays items from the online calendar you can create at its site. After you add an event to your calendar, you can add details such its description, time, and location. Then, you simply click the "Get the Badge" icon, and Calendar Hub will generate the badge's code for you. Upcoming-event badges created by Calendar Hub only come in one size and color and cannot display upcoming events more than 30 days in the future. However, you can add as many events as you like, and CalendarHub will automatically place new events on the badge without requiring you to upload a new file to your Web server.

Social-events calendar Upcoming.org also provides a tool for creating badges that display upcoming events. Upcoming.org 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.org badges can display either five or 10 future events and will automatically update themselves each time you add a new event.

And now that you've added a calendar or event badges to your Web site? Time to look into a few good RSVP tools to register all those people who want to attend those events.