Display & Customize Multiple Google Calendar Feeds on WordPress

customize google calendar in wordpress

Orlando WordPress Design & Development

How to customize Google Calendar on a WordPress website? Apply custom CSS to Google Calendar.

Google calendar is free & powerful calendar solution that allows clients to share a schedule, set up reminders, send invitations and track RSVPs.

Google allows you to easily embed a calendar into your WordPress website via iframe.  However, some iframe attributes are not supported in HTML5 and since the iframe is hosted by Google it becomes impossible to customize the way it looks with CSS.

An iframe embedded Google calendar looks like this:

embedded google calendar iframe

One of my clients wanted to display 13 Google calendars into their WordPress website but they wanted to match the look and feel of their site, so using the iframe was not an option.

WordPress Google Calendar Events Plugin

Using the plugin Google Calendar Events, I was able to parse the 13 Google Calendar feeds and display the events as a calendar grid or list on a page, post or widget.

The final list of events looks like this:

custom google calendar using  rss feeds

And the final calendar grid looks like this:

custom google calendar CSS styles

How to use the WordPress Google Calendar Events Plugin:

1. Install and activate the plugin

2. Add the Google Calendar Feeds

Add Google Calendar Feed

3. Add the URL were the new CSS styles will be hosted
custom google calendar css


To display the events as a list:

1. Make sure each feed is set to “event display builder” under the “display options”

display options

2. On the “Event Display Builder” Type on the box the following shortcode:

<div>[link newwindow="true"] <div>[event-title]</div>[/link]</div>

4.  Add the following  shortcode to the page were you want to display the calendar:

[google-calendar-events  type="list-grouped" title="" max="6"]

5. Customize the CSS

The feed outputs to HTML like this:

<div>
<ul><li>
<div> November 2, 2012</div>
<ul><li>
<div>
<a href="https://www.google.com/calendar/event?" target="_blank"> 
<div>Varsity Volleyball White vs. Lourdes white</div></a></div>
</li></ul>
</li></ul>
</div>

I added the following styles to my CSS Style:

/*  GOOGLE CALENDAR FEED */

.gce-page-list{
    margin:0px!important;
    padding:0px!important;

}

ul.gce-list{
    margin:0px;
    padding:0px;
    list-style-type:none    
}

ul.gce-list li{
    margin:0px!important;
    padding:0px!important;

}

.gce-page-list .gce-list .gce-list-event {
    background-color: #fff;
    border-bottom: 1px solid #CCC
}

To display the events as a grid with AJAX tooltips:

Add the following  shortcode to the page were you want to display the calendar:

[google-calendar-events type="ajax" title="Events on"]

More demos are available on the plugin website at: http://rhanney.co.uk


WordPress Theme Development Orlando: Contact me for a free quote!

Category: Wordpress Orlando No Comments