Share events! Add a calendar to your website.

You do have options. A calendar can be created as a list, a PDF document, a table or directly online. You can create one calendar for all the events and add it to your home page or news or events page, or create individual program-specific calendars to add to your program pages. Here are some tips for Contribute users on how to create a calendar in the above formats.

Calendar as bulleted listAs a list on your webpage: A calendar of events can be as simple as a bulleted list typed directly onto your page and set up with an appropriate title ‘heading 3’ style and using bold or a style of ‘heading 4’ to emphasize the months. Associated information may include the date, event name or purpose, time and location.


As a pdf file: Create a calendar in Microsoft Word or Publisher (or another program), save it as a pdf file, then using appropriate text, link the pdf file from your webpage. Be sure to use text that explains what the link is and not ‘Click here.’




NOTE: DO NOT convert the calendar file document (or any text file, flyer, brochure, etc.) to a .jpg image and insert that image directly onto your webpage. Visitors using assistive technologies such as  screen readers will not be able to access the information so it will NOT be accessible!  If you choose to add the image, also include the important information as normal text in your content area.

As a table: Tables consist of tabular data and are considered data tables when row headers, column headers, or both are used as shown below.

Table Calendar example





  • Data is what you’re sharing when you list your event information.
  • Properly designed data tables are accessible to site visitors who may be using assistive technologies like screen readers.
  • Tables are quick to create in Contribute and easy to update.

I want to use a table. How do I create it?

  • Log onto Adobe Contribute. Browse to and edit the appropriate page.
  • Click at the point on the page where you want to insert your table.
  • Add a heading for your calendar and tap your Enter key for a new line.
  • Click the Table button in the top menu bar. Table button
  • The Insert Table dialog will box openTable dialog box. There are several options you can edit. Assign a starting number of rows and columns. These can be adjusted as necessary by inserting or deleting rows and/or columns. Set border thickness to ‘0.’ For the header, choose Top or Both. Click OK.
  • A blank table will be inserted on your page.
  • Add your data to the rows and columns (see table example above)
  • Select the table and assign a style of ‘grid’, ‘grid2’, or ‘grid3’ to choose the layout you like best. These styles format the table spacing, font sizes and borders.
  • To add color to the column header row, select the row by clicking on the left edge (or drag across the cells), then right click, choose Table Cell Properties, and choose a Background color. Select a light color so your text can be easily read.

For more information on working with tables, visit Contribute DIY Guide: Working with tables.

As an online calendar: We recommend using Google Calendar. An online calendar can be updated instantly from wherever you have Internet access to your Google account. Follow these basic steps.

  • Establish a Google account for your office. It’s a good idea to have two full time employee administrators. Don’t add students, part-time or temporary employees as administrators.
  • Create your calendar as a PUBLIC calendar.
  • Share your calendar. Google will provide the html code that must be added to your webpage in order for visitors to view the calendar. The basic code should look similar to the code below, but may be more complicated if you edit the calendar settings.

<iframe src=”” style=”border: 0″ width=”800″ height=”600″ frameborder=”0″ scrolling=”no”></iframe>

This code must be edited and added to your webpage by a member of the CAES Web Team. Email for help.

The calendar can be embedded on a page in three ways:

  1. With other content as shown on the Fayette County ANR webpage.
  2. On a page created just for the calendar like the Habersham County 4-H webpage which shows the local navigation.
  3. On a full-width page like Gordon County 4-H webpage without the local navigation list.

Let the CAES Web Team know which layout you prefer. Once the <iframe> code is added to the page, your calendar will be visible and be updated every time you log in to your Google account and edit it.

For more information on creating an online calendar, visit the Welcome to the Google Calendar Help Center website.