Use WordPress and GCal To Create A Dynamic Course Calendar, Part 2

WordPress is a great tool for hosting your course content, and it’s not terribly hard to add a dynamic course calendar to your WordPress site. In part 1 of this tutorial, I reviewed how to make a public calendar of events in Google Calendar and then grab the ICS file. Below, I’ll show you first how to add a plugin that grabs the ICS file to display in WordPress and then how to custom format each event in that file. [If you’re just joining us, you might first take a look at these previously published posts: “WordPress a Better LMS,” “Create Your Syllabus With a Spreadsheet and a Calendar App,” and Part 1 of the current tutorial.]

A. Select “Plugins > Add New”

B. Search for the “ICS Calendar” plugin

C. Install the “ICS Calendar” plugin

D. Activate the plugin

E. Select “Settings > ICS Calendar”

F. Paste the address for the ICS file, then click “Save Changes"at the bottom of the page

G. To display the calendar on your site, select “Pages > Add New”

H. Add the calendar to the page

1. Name your page something like “Calendar,”
2. Put "[show-ics-events]” into the body of the page, and
3. Click “Publish”

I. Adjust the appearance of the information from the calendar

1. Go to “Settings > ICS Calendar.”
2. Scroll down to “Formatting > Custom Event Format.”
3. Make sure you’ve clicked “Yes” next to “Use custom format?”
4. Add HTML tags to display the information any way you’d like. (See below)
5. Experiment until you get things just the way you want them.

Now, each event has several different fields associated with it, and each of those fields is passed from the calendar to the plugin for display. If you like, you can let the plugin use its default settings to display the events. Alternately, you can use the following variables (each of which corresponds to a particular field) to customize the way information is displayed:

• %date-time%: The start date, end date (if different), start time, and end time, all displayed together, for the event.
• %start-date% The start date for the event.
• %start-time% The starting time for the event.
• %end-date% The end date for the event (will not display if the event only lasts one day).
• %end-time% The ending time for the event.
• %event-title% The title of the event.
• %description% A description of the event (will not display if not provided)
• %location% Where the event will take place (will not display if not provided.)

For example, I use the following combination of HTML and variables:

<p>

<div><strong>%start-date%</strong></div>

<div>%event-title%</div>

<div style="margin-left: 1em;">%description%</div>

</p>

This results in a calendar where each event looks something like this completely hypothetical example:

Next time: Incorporating other calendars into the course calendar. Sometimes you’ll want to alert your students to events on campus or in the community.

How about you? Do you have an alternate method for creating a dynamic calendar like this? Tell us about it in the comments!