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!
paul webb says
Hi James
I am using a wordpress based site on a hosted domain
I am not a programmer!
I ftp’d the unzipped fullcalendar files into a directory under my hostname call fullcalendar
i created the following on a page
//
nothing happens
what have i done wrong?
Best wishes
Paul Webb
James Cooper says
Hi Paul,
For it to work on a WordPress site, you will probably need to create a custom ‘page template’ (http://codex.wordpress.org/Page_Templates) for the theme and put all the code for the calendar within the ‘raw’ html/php for that.
WordPress doesn’t like it if you put javascript into the main editors in the admin. They strip all things like that out. (That’s actually a good idea as it shops people doing nasty things or breaking their sites by accident!)
I hope that helps!
Colin Bovet says
Hi James,
Thanks for this article. We were looking for a way to display beautiful Google Calendars on TV screens using a fullscreen embed, and didn’t find much. We decided to build our own Calendar App that runs on a small media player connected to HD TVs.
You can see more at http://enplug.com/blog/display-calendar-bookings
Duane says
I’m struggling to figure out how to do this. I’m not a web developer, just a generally tech savvy person trying to setup a website for our school PTA, to help children.
All I really want is to have a calendar in Weebly that is not tacky and unprofessional looking like a direct embed of a google calendar.
I volunteered to set up a website and donate the hosting cost because I think we could do a lot more if we have a website. The only other options besides FullCalendar are services that cost $8-10 a month. That’s not practical for a Google calendar “Skin” as a small non-profit. I would be willing to pay myself a reasonable one time fee for something like that.
Any advice would be greatly appreciated.
James Cooper says
Hi Duane,
If you’re using Weebly to run the site, the best option is probably to follow their own guide on embedding a Google Calendar via an iFrame: https://www.weebly.com/app/help/us/en/topics/add-a-calendar-to-your-site
I know it’s not pretty but if you’re not familiar with code, etc. it will be the easiest option!
To add the calendar via fullcalendar, you’d need to add code as in:
https://fullcalendar.io/docs/initialize-globals
I’ve never used Weebly, but it looks like you can add the code manually:
https://www.quora.com/Is-it-possible-to-add-custom-JavaScript-to-a-Weebly-page
The js and css links would be in the ‘header’ and the in the main content where the calendar is wanted to be displayed.
I don’t think Weebly will allow you to ‘host’ the files yourself, so you would need to use a ‘CDN’ hosted version of the files (CDN = Content Delivery Network and is where files live on another server and you’re allowed to link to and use them). You can get the links form:
https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/
But that all might get a bit complicated I’m afraid…
I hope that helps a bit. I’m not sure I can really help more!