How to Add a Responsive Calendar to Your WordPress Site

How to Add a Responsive Calendar to Your WordPress Site

Plenty of websites benefit from having a calendar. If you’re advertising events, co-ordinating a team’s activities, or providing community information, embedding a calendar into your site will help users get the information they need quickly and easily.

If all you need is to display dates and times, and you’re already storing all that in a Google calendar, then embedding that Google calendar in one of the pages of your site is the easiest way to go about it.

In this Weekend WordPress post, I’ll show you exactly how to embed a Google calendar in your site. What’s more, you’ll learn how to make your calendar responsive so that whatever device people are visiting your site from, your calendar won’t break the layout.

I’m going to assume you’ve already got a Google calendar you can use, but in case you haven’t, you can use a public calendar, which is what I’m going to do here. I’ll start by showing you how to access that public calendar: if you’ve got your own, you can skip this step.

So, we’re going to work through three steps:

  • Accessing and subscribing to the public calendar (skip this if you’re working with your own calendar)
  • Adding the calendar’s embed code to our site
  • Adding some simple CSS to make the calendar responsive.

I’ll then show you how you can take this further by adding multiple calendars.

Let’s get started!

Step 1: Accessing and Subscribing to a Public Calendar

The first step is to get hold of that public calendar. Google makes a list of public calendars available, and you can access them from right within the Google calendar interface.

Start by opening up Google Calendar in your browser and signing in.

This will give you the calendar interface:

Google calendar with no calendars visible

To access a public calendar, click on the downwards arrow to the left of the Other calendars list on the bottom left:

Google calendar - selecting the option to browse interesting calendars

Click on Browse Interesting Calendars to see a list of publicly available calendars:

Google public calendars listing

Browse the calendars and select the one you want to use: I’m selecting Holidays in the United Kingdom. If you want to preview the calendar first, click the Preview link to open it. To add the public calendar to your own calendar so you can embed it, click the Subscribe link.

Click the Back to calendar link at the top of the screen to return to your normal calendar screen. You’ll now see your own calendar with the public calendar added:

Google calendar with one calendar added

Now move onto the next step to embed the calendar in your site.

Step 2: Embedding the Calendar in Your Site

The next step (or first step if you’re working with your own calendar) is to embed the calendar in your site.

If you already have a page on your site where you want to include the calendar, open that in the WordPress admin. Or if you don’t create a new page and start editing that. Make sure you’ve got the Text tab open, not the Visual tab.

Now go back to your calendar in your browser. Click on the downwards arrow to the right of the calendar’s name and then click on Calendar settings.

Note: If you’re working with your own calendar, make sure that calendar is public. You can edit this via the Settings screen.

This opens the settings screen, including an Embed This Calendar section:

Google calendar settings screen

On the right, you’ll see the code that you need to copy into your site. You can either copy this as it is or click the link above to customize the color and other options.

Copy that code and go back to your page. Now paste the same code into your page, making sure you’re in the Text tab. Mine looks like this:

Page editing screen with calendar code added

Now save your page by clicking on Publish or Update and view it.

What you see now will depend on your theme. If you’re using a responsive theme, the calendar should resize when you resize the browser window. But if your theme isn’t fully responsive, you’ll need to add a line of CSS.

I’ve traveled back in time to see what my page would have looked like five years ago and activated the twenty ten theme, which isn’t responsive. Here’s how my calendar looks:

The calendar in the frontend, overlapping the sidebar

Because the width of the calendar is greater than the width of its continuing element, it takes up more width than the main content area of the page and overlaps the sidebar. If I resize my window to make it smaller, it completely breaks the layout.

The good news is that this is easily fixed with one line of CSS.

Adding CSS to make the Calendar Responsive

If your calendar doesn’t resize when you resize the browser window, you’ll need to add a single line of CSS to your theme’s stylesheet.

If you’re working with a third-party theme (i.e. one you didn’t create yourself), you should create a child theme first for your CSS. If you don’t do this, your work will be lost next time you update the theme.

So if you need to create a child theme, go ahead and do so, using the instructions from our guide to child themes.

Here’s my stylesheet in my child theme. This is the only file the theme needs:

Once you’ve done that, activate the child theme.

Now open up the stylesheet (style.css) in your theme (or child theme), and add this line:

Refresh your page in the browser and you’ll find that the calendar resizes to fit in its containing element, and when you resize the window, the calendar resizes with it:

The responsive calendar doesn't overlap the sidebar

Taking it Further: Multiple Calendars

If you want to take things further, you can add multiple calendars from Google calendar and have them all display in the same calendar view.

To do this, first, you need to either subscribe to or create all of the calendars in Google calendar. Below you can see I’ve subscribed to three public calendars in total, for public holidays in the UK, US, and Australia:

Google calendar with multiple ca;endorse visible

Now let’s embed those calendars. Firstly, click on the downwards arrow to the right of one of the calendars you want to embed. When the settings screen appears, don’t copy the code: instead, click on the link for editing the color, size, and other options.

This will open a new screen when you can edit the embed settings. On the left-hand side, you will see all of your calendars. Simply check the checkbox next to each calendar you want to include in your embed code. You can see below that I’ve checked my three public calendars:

Google calendar settings with multiple calendars checked

If you want, you can edit the colors for each calendar from that screen, by clicking the colored box to the right of each calendar and picking a color. It’s a good idea to use a different color for each calendar so your users can see which is which.

The other important thing to do is to add a title for your calendar in the Calendar Title field at the top left. If you don’t do this, it will default to the name of the first calendar listed, which could be confusing.

Copy the code that appears in the box above the calendar and paste that into your site.

I’ve now saved my page with both calendars, one with just one calendar and one with multiple calendars:

Multiple calendars in one calendar view on the site

Because the CSS we added already applies to all iframe elements, it applies to this calendar too, so that’s also responsive.

Embedding a Google calendar in your site is something you can easily do in half an hour or so. Whether you’re working with your own calendar or a public one that Google has made available, it’s a case of grabbing the embed code, adding it to your page, and then adding some simple CSS to make it responsive if that’s not already part of your theme.