On the University of Mary Washington website, we utilize a modified version of a plugin called “Google Calendar Events” that allows us to display information from multiple Google Calendars together. The customizations that have been made to the plugin specifically for UMW allow us to share a common group of calendars among all departments and divisions. Because we use this plugin to implement and aggregate Google Calendars on the website, the website does not support the standard <iframe> code that Google provides for embedding a calendar on a website.
Using the Calendar
If you would like to insert a calendar or group of calendars into your website, there are a few options.
Google Calendar Events Widget Examples
Using a Widget
Your first option is to use a widget in any of your widgetized areas (or “sidebars”). To do so, simply visit Appearance -> Widgets in the administration area for your website. Then, locate the “Google Calendar Events” widget and drag it into the appropriate widgetized area. Once you’ve added it to the widgetized area, you will see a group of options.
- Title – This is the title of the widget itself. If you would like a heading to display above the event list/calendar, enter some text here
- Feed IDs to display in this widget – This is a list of all of the calendars that are currently available for use. Select the calendar(s) that you would like to display within the widget. To select multiple calendars, hold down the Ctrl (or Cmd on a Mac) key and click on each of the calendars you want to include.
- Display as– This controls what type of widget is displayed in your widgetized area. There are four different options:
- Calendar (current month only) – This will display a grid calendar that only displays the current month
- Calendar (links to future months) – This will display a grid calendar with a “Next Month” link in the top right that allows users to navigate to future months. The “Next Month” link will only appear if the selected calendars actually have at least one event scheduled in the upcoming month.
- List of Events – This will display a bullet list of events, where each event has its own heading.
- Grouped list – This will display a bullet list of events, where the events are grouped under common headings for each date.
- Maximum no. of events to display – If you would like to limit the number of events that are displayed within the widget, enter a number in this field. If the field is set to 0, the widget will display the full list of events that are retrieved from the calendar.
- Display title on tooltip/list item? – When you choose one of the “calendar” display options, hovering over a date will display a “tooltip” (or pop-up type of box) listing all of the events scheduled on that day. If you would like that pop-up to have a title (such as “Events on March 7” or something similar), enter the text you would like to appear before the appropriate date (e.g., in the previous example, “March 7” would be automatically displayed, so you would just enter “Events on” in the box). If you are using the “List of Events” widget, you can choose to display a title above each event. If you are using the “Grouped list” type of widget, a title will be displayed regardless of your selection here.
Google Calendar Events Shortcode Example
Inserting a Calendar/List of Events in a Page or Post
If you would prefer to have a calendar or list of events displayed within the content of a specific page or post, you can easily do that, as well. To begin, simply create a new page or post, or edit an existing page or post. Then, place your cursor in the editor where you would like the calendar to be inserted. Click the “Insert a Calendar” icon in the editor toolbar (it is in the third row of buttons on the toolbar – if you only see one row of buttons, you will need to click the “Show/Hide Kitchen Sink” button near the end of the first row of buttons – or press Alt+Shift+Z on your keyboard).
When you click the “Insert a Calendar” button, a window will appear over top of the editor allowing you to configure the calendar being inserted.
The first screen you see will have a full list of the available calendars. Place a check mark in each of the appropriate boxes for the calendar(s) you want to include. You can then click the “Insert” button on the far right of that window (if you can’t see it, you may need to scroll to the right a little bit). By default, the inserted calendar will be displayed as a calendar with links to future months, and no title will be displayed above the lists of events when someone hovers over a date.
If you would like to change the display of the calendar, you can click the “Calendar Display Options” tab at the top of the window that opened when you clicked “Insert a Calendar”.
If you need to edit a calendar that has already been inserted into a post or page, simply place your cursor somewhere inside of the shortcode (the part that starts with [[google-calendar-events]]) and click the “Insert a Calendar” button.
Sharing a Google Calendar
Getting Your Calendar Added to the List of Calendars
If you don’t see your Google calendar listed among the available calendars, please follow these steps:
- Login to Google Calendar using the account that manages the calendar
- In the left sidebar of your Google Calendar page, under the “My Calendars” heading, locate the calendar you want to share
- Click the down arrow next to that calendar name, and click on “Share this calendar”
- Under the “Share With Specific People” heading, enter “webmaster@umw.edu” into the box that says “Enter email address”, choose “Make changes AND manage sharing” from the select box next to that, and click the “Save” button.
- Once you’ve completed those steps, email webmaster@umw.edu and inform us that you’ve shared a new calendar with us. In the message, please include the name of the calendar so that we can determine which calendar was newly shared with us.
- Within a day or two, you should receive a message letting you know that the calendar is available on the website, and you can proceed with the steps listed in the section above.
