Web Builder Help
Setting up and using Google Calendars within your website is easy and free. You can have as many calendars as you want (so each department or group within your organisation can manage their own calendar). You can merge multiple calendars onto one master calendar so everyone knows exactly what is going on when.
Here's an example calendar and below it are step-by-step instructions.
Some of the options below may vary depending on your account setup but the principles will be similar.
- Skip to step 4 if your organisation has a Google Account (such as a Gmail/Googlemail account) if not then first create a new account at www.google.com/calendar. When you setup the account it may be best to set it up in a generic address for your organisation (rather than a personal address you own) just in case your role changes and you need to hand over full responsibilities for the calendar and other Google services to someone else
- Fill in all your details and click Create My Account
- Google will send you a confirmation email. If you can't see the email after a few minutes check any relevant junk/spam mail folders. Click the link in the email to activate the account
- Login to your Google Calendar account
On the left hand side click the drop down arrow (or three dots) next to the relevant calendar
If you have three dots select the words 'Settings and sharing'.
If you are on the 'Calendar settings' screen scroll down to 'Access permissions' and tick box to 'Make available to public' and select 'See all event details' and jump to step 7, alternatively if your screen looks like below then follow these instructons
Then tick the "Share this calendar" box and click "Save" then click on Calendar Details
- Scroll down to the section called 'Integrate calendar'. There you will see your Calendar ID. Simply copy that and jump to step 8. If you don't have the 'Integrate calendar' section go instead to the Calendar Details page scroll down to the section marked Calendar Address. You'll see it says Calendar ID: followed by an email address (in our example below we've underlined just the address in red).
It may be show just your email address or if you have multiple calendars it could be a very long address. Very carefully select just the address inside the brackets and copy it (To make a selection click and hold down your left mouse button at the start of the address then drag to the end of the address and release the mouse taking care not to copy any extra characters such as spaces etc. The address should now be highlighted. To copy the address you can right click on the address and select copy or use the shortcut key Ctrl-C). If you aren't sure about copying you can simply write the address down on a bit of paper.
- Open up in the editor the page you wish the calendar to appear on
- Click where you want the calendar to appear
- Click on the Extras menu (at the top)
- Select Google Calendar
An options panel will appear. You must include your Calendar ID (as described above) and we recommend you include a Title which should be either your organisation or department name. The other options you can set yourself (we've set defaults which work well for most organisations). Description of options:
Calendar ID: The unique ID for the calendar (normally the email address of your calendar account)
Title: This is the wording that will be at the top of the calendar
Default View: Agenda (lists forthcoming events chronologically. Visitors can scroll down and see all your events in an easy to use list), Weekly (just shows what's on for this week and can be slow for users to click through week by week to find info they need), Monthly (as the boxes for each day can be quite small information can get cut off but lots of people like this view.. we still recommend Agenda for most people)
Week Starts: Simply lets you choose which day you wish to display as the first of the week
Week/Month/Agenda tabs: Lets your user change the view of the calendar
Navigation: Next and previous buttons to move forwards and backwards in time
Date: Displays the current date and helps you hop to any other date
Print Icon: If you want people to print the calendar then tick this
Width: Specify the width you want. If your not sure start at 480 pixels and if it's too small simply delete the small one and try again with a larger number (e.g. 580 pixels).
Height: 588 pixels is a good starting point but feel free to try other values (maybe adjusting by 100 pixels each time) until you find the right size for you.
- Click the Insert Calendar button and the calendar will be embedded in your page.
Note you can do very clever things with calendars such as combining multiple calendars and changing the way they are displayed. If you wish to do this then follow these instructions:
- Login to your Google Calendar account
Click the drop down arrow or three dots next to the relevant calendar on the left hand side and select Calendar Settings or 'Settings and sharing'
Scroll down to the section marked Embed This Calendar OR Integrate calendar
- Click 'Customise' or 'Customize the color, size, and other options'
- Make any changes you like on the left hand side and then click Update HTML in the top right. Take care not to set the width wider than the editable area or it may not look perfect on the site
Select all the HTML code in the top box and copy it. Inside the editor open the page you would like it to appear on. Click roughly where you want the calendar to appear and then press Return to get a new line. Simple paste the copied code and the calendar should appear straight away. If you need help please contact the helpdesk.
A Note About Timezones:
If you are in a country where your clock is modified by Daylight Saving changes - often a one hour adjustment forward or back e.g. in Spring and Autumn - then please ensure you set up your account correctly. For example if you are in the UK you need to make sure you don't set your Timezone as GMT (Greenwich Mean Time) as that will not adjust automatically to British Summer Time (BST). If in the UK, you should select your Timezone as 'London' which will keep pace with the changes. This change should be made in two places, on the Google account itself and the specific calendar.