Using a Calendar on your Website

 Nov 24, 2015

In this post, I’m going to touch on how we can create a calendar within one of our websites that fully synchronises to one of our Google calendars. To find a decent calendar library to use can be quite a daunting task and you might actually have to pay for the solutions you come across.

Luckily there is a free solution that works quite well and is easy to use, this solution was created by Adam Shaw and is called “Fullcalendar”. You can find it at http://fullcalendar.io/ , they provide excellent documentation on the product as well.

Including a calendar within a site can add great value to your website; allowing your clients to see everything based around your schedule. Using FullCalendar you can include your own styling and manipulation of events.

After downloading the file from the website, you have to include the needed JavaScript and CSS files.

download (7)

The next step is to make sure we set up a calendar in our google account to be used within our website. To get this key you first have to access https://console.developers.google.com and create a new project.

download (8)

This project will expose an API key that you will be able to use, allowing you to access your calendar. You can create the API key by going to APIs & auth > credentials, and then pressing the Create new Key button. A few options will have to be provided, such as the type of key and what domains can use it. I am using a browser key and all domains.

download (9)

Next, we want to make sure the calendar we want to use on google is set to public. To do this, navigate to the Google calendar in question; hit the drop down box next to it and press the Share this Calendar action.

download (10)

On this screen you should tick the box that makes the calendar public, allowing anybody that accesses your site to see the event information.

download (11)

Once you have made your calendar public, hit the drop down box next to it again and this time open up the Settings page. In the settings page your need to find the Calendar Address section that shows the address you need to access it remotely.

download (12)

Once you have both of these values you can create a new javascript file in you project that will render the calendar element for us, note this is where the API key and the Calendar address will be used. The following is an example of how the javascript code will look. The googleCalendarId is the calendar address you got earlier.

download (13)

Finally, you need to add a div element with an ID of ‘calendar’, a reference to the Javascript file and a script block that fires the method on the document.ready event

download (14)

All that is left is to run a test on the website and you should see all the events on the calendar. Below is a fragment of the result.

download (15)

How do your Excel skills stack up?   

Test Now  

About the Author:

Auret Swanepoel  

As a recent addition to the New Horizons team, Auret is a highly skilled and qualified IT Technical trainer. He has been a Microsoft Certified Trainer (MCT) since 2008 and has since then, also become a Microsoft Certified Professional (MCP), a Microsoft Certified Technology Specialist (MCTS) and a Microsoft Certified Information Technology Professional (MCITP). With his international experience as a trainer in South Africa, Auret is able to adapt his teaching style to different audiences in the classroom and ensure that students are learning in a positive and collaborative environment.

Read full bio
top
Back to top