News & updates

Find out what’s new at Your Web Department

How to embed a Google Calendar into your website

 February 14, 2014
by Flavio Mester

Calendars can be very useful for business websites. You can use them to post upcoming events like tradeshows, conferences, new product releases, etc. A website management system like Your Web Department includes a very powerful Events Calendar tool that lets you create events and display them in different formats such as lists and monthly calendars. And you can extensively customize its look and feel. But you can also use Google Calendar for that if you prefer, and then easily insert/embed it into your business website.

Creating and managing a Google Calendar

Google Calendar -- www.google.com/calendar -- is a free tool that lets you build (and in our case here share) your own calendars. If you already have a Google account (if you use GMail for instance) you can sign in to Google Drive directly from there. If you don’t have a Google account click the Sign up button.

The video below (from Anson Alexander) will get you started on how to create an manage your calendar:

 

Sharing the calendar with the world

You can use Google Calendar as your own (and private) time-management application. But in this case we want to make our calendar available to anyone accessing your business website. So once you have your calendar ready, rollover its name under My calendars and click on the down-arrow next to it, so a popup menu will appear. Select the Share this Calendar option:

Sharing a Google Calendar

Check Share this calendar with others and also Make this calendar public. This will make all the calendar information available to anyone. I’m assuming you're not keeping any personal information of a private nature in this calendar, of course!

Adding the calendar to your business website

Google automatically generates the code you need in order to embed/insert the calendar into your Your Web Department business website. Here’s how you do it:

1. In Google Calendar, click the down-arrow next to the calendar name to display the popup dialog and select Calendar settings. You can use that page to customize your calendar’s look and feel, dimensions and other aspects.

2. At the top of the page you will see a box similar to this one, highlighted here in red. Select and copy all the text inside the box:

3. Now go to your website’s administration interface in Your Web Department and navigate to the page where you’d like to embed/insert the Google Calendar. Click Add content in the YWD toolbar, and then Embed Code. Paste the code you just copied there, and save.

Preview the page and you’ll see the calendar embedded there:

Embedded Google Calendar


You can always go back to Google Calendar and change its dimensions, colours, etc. then grab their code again.

What’s neat is that as you add more events to your Google Calendar, your website will reflect that automatically.

Want to go even fancier?

Let's say you prefer not to embed the calendar itself on the page, but rather pop it up above it. For instance, a page like this one, with a calendar image and a text link:

Calendar icon


When either the calendar or the text link is clicked, you would like your Google Calendar to pop up in a “lightbox” hovering above the page.

To do that:

1. Grab the portion of the code provided by Google Calendar that’s inside the first pair of quotes i.e. the URL (the address) of the calendar:

Google Calendar URL

In Your Web Department, instead of using an Embed Code content block, create a link from your text or image in a regular Word Processor block, and paste the URL you copied above. In the Target tab of the link properties window, select .

That’s it: when the page is displayed, if people click on the link they’ll see your Google Calendar inside this “floating” layer:

Google Calendar in a lightbox


Flavio Mester

Flavio Mester is a graphic designer as well as a systems analyst (in a distant life he was an architect). A founding partner of Your Web Department, he's responsible for the design and development of all the YWD website management platform interfaces.
Google+ | Twitter | LinkedIn

 


  

  Dec 16, 2015 04:43AM
Abcd Eau
http://abcd-eau.fr/

 

 
Top of page