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.
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.
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.
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.
On this screen you should tick the box that makes the calendar public, allowing anybody that accesses your site to see the event information.
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.
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.
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
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.
How do your Excel skills stack up?
Test NowNext up:
- Custom Data Validation Rules in Excel
- Using the Fluent API with Entity Framework
- Embedding Organisational Values into Performance Management
- Hide Parts of a Page from Certain Users in SharePoint
- Combining different chart types in Excel 2013
- Intro and setup for Xbox SmartGlass
- My mate Stevo said it was good and Norm just couldn’t wait his turn!
- Difference between ByVal and ByRef in VBA
- Fiddly actions with Word tables
- Windows as a Service – The new Update Model
Previously
- Ever typed a date into Excel and it turned into a number?
- What is ITIL?
- The best features of Excel 2013 - Part 1
- Why effective leadership is like yogurt
- AngularJS Service - The Basics
- The Quick Brown Fox...
- Customise the navigation drop-down in SharePoint
- From Rivals to Friends … The rise of a new behemoth – The Red Microsoft Hat.
- Is your ‘Human Capital’ stock going up or down?
- I wasn't meant to send that!