If you need a calendar for your website (be it a Church, club, business or a personal site) chances are you’ll head on over and use Google Calendar. But let’s be honest, when you embed a Google Calendar in a site, it’s not exactly pretty…
However, I’ve recently discovered a nifty little script that can turn your Google Calendar embed into a thing of beauty!
How-To Make Good Looking Calendar Embeds
FullCalendar, by Adam Shaw a San Francisco based Web Developer, is an easy to use yet very powerful script for displaying Google Calendars in a really lovely way.
To add a calendar using full calendar you need to include the scripts JS and CSS (and jQuery):
add a div to contain/display the calendar on the page:
and then a JS call with an address for a calendar and any of the other (many!) options which the script can do, such as:
The above shows the calendar in the ‘agenda week’ view with with some elements in the calendar header – ‘previous/next’ and ‘today’ buttons on the left, the month/week title in the center and the different view buttons on the right. You can display multiple calendars by adding multiple ‘events’ items.
The FullCalendar documents are extensive and explain all the great options and features the script has.
If you’re displaying a calendar from a ‘normal’ google account, you just use the ‘private xml’ feed (the instructions are in the FullCalendar docs). However, if you’re trying to embed a calendar from a Google Apps account, things are a bit stricter (this is down to how Google sets sharing options for Google Apps accounts).
To use a calendar from Google Apps, you first need to check a couple of settings in the Google Apps admin Dashboard and the Calendar settings. In both ‘Org Settings’ and ‘General’ the ‘External Sharing’ options need to be set to: ‘Share all information, but outsiders cannot change calendars’.
You can also customise the look of your calendar using CSS. By default the events are displayed with a blue background. This can easily be changed in the .fc-event-skin element.
I also wanted to use a calendar on a client’s site which is for a holiday cottage. They simply wanted to show if something was booked – but show no event details. To do this, I simply added the following CSS to a.fc-event: text-indent:9999px; cursor:default; Using that the text is hidden and the events don’t look they’re clickable! You can see it in action on the holiday cottage booking page (I’ve changed a number of CSS things in the calendar so it fits with the site design!).
If you’re already the jQuery UI theme on your site – the calendar can also play happily with that and use the styles!
So if you’re wanting a nice looking Google Calendar for your site, and don’t mind playing with a bit of code, give FullCalendar a try!