Need to add a calendar to your website? One of our clients, the Center for Mindful Living, had a Google calendar. It was easy for volunteers and staff to maintain, but the Google calendar was ugly – and didn’t match the peaceful modern feel of their website. They wanted a way to use their Google calendar, but make it blend in with their website. As usual, there’s a plugin for that. In this case, we found the plugin Simple Calendar.
A: Install the Simple Calendar plugin
From your WordPress Dashboard, go to Plugins > Add New. In the Keyword search box at the top of the page, type in Simple Calendar. WordPress will show several similarly-titled plugins, select the one by Simple Calendar. (Note: ALWAYS check the author when installing a new plugin to make sure it matches the one you’re looking for.) Click on the Install Now button in the plugin box, and then click Activate.
The free version of Simple Calendar allows you to display public Google Calendars. To make your Google Calendar public:
- From Google Calendars, click on the dropdown icon next to the calendar you want to share.
- Select Share this Calendar. This will take you to Google’s calendar sharing settings.
- Check the box next to Make this calendar public
- Click the Save button
Next, you’ll need the ID for the calendar you want to share:
- In the Calendar Details tab, scroll down to the Calendar Address section.
- Copy the Calendar ID (including the string @group.calendar.google.com) and paste it into a text file. You’ll need that in a few minutes.
B: Create a Google API
To allow website developers – that’s you – to integrate data from Google into other applications, Google created a set of application programming interfaces (APIs) to transfer information back and forth. You’ll need to create a Google API key to allow your website to pull information from your Google Calendar. It sounds complicated, but it actually takes less than two minutes.
- Go to the Google Developers Console. If you don’t have a Google account – or you want an account that is separate from your personal Gmail account – create a new one.
- From the top Project menu select Create project.
- Give your project a name, agree to the terms, and click Create.
- From the Google Developers Console Dashboard, select Enable API. (If you don’t see this, click on the top left menu icon and select API Manager.)
- Under Google Apps APIs, select Calendar API. Then click Enable.
- Select Credentials under API Manager in the left menu, click Create credentials, then select API key.
- On the API key created popup screen, select and copy your newly created API key
- Navigate back to your WordPress dashboard.
- Go to Calendars > Settings. Paste your Google API Key here
- Click on Save Changes
C Add Your CalendarTo add your Google Calendar to your website, from your WordPress Dashboard, go to Calendars > Add New. Add a title for your Calendar (just like any other post).
- Scroll to the Calendar Settings panel at the bottom part of the Edit Screen.
- In the Event Source dropdown, select Google Calendar
- Click on Google Calendar to open the Google Calendar Settings panel. This is where you tell Simple Calendar which Google Calendar to pull events from. Copy your Calendar ID that you saved in step A, and paste it into the Calendar ID input area.
- Click the blue Publish button in the top right column to save your Calendar page.
You can choose to display your calendar as a monthly grid or a list, and both are customizable. The overall look can be set to Light or Dark, depending on your WordPress theme, and you can edit the colors for the calendar. More information on these settings can be found on the Simple Calendar website.