Make a branded version of your Google calendar and embed it on your website

Ever wished that Google Calendar offered more visual customisation? Sure, the recent redesign significantly improved the appearance of Google's flagship scheduling product - you were no longer embarrassed to share your calendars with others. But unless you didn't mind your calendar looking nothing like the rest of your web presence, you would have been left slightly disappointed. Google Calendar - even after the design - offered only two color schemes; Classic and Modern, which look so similar you are often not sure which one you are using.

If you were looking for a dramatically different appearance for your online calendar, there was nothing you could do. Until now. Our newly-launched ChronoFlo Calendar has been designed from the outset to be highly-customisable visually. You can change the color of virtually every part of the calendar. You can use background images to enliven the design, change the font-size to make the text more readable, add drop shadows to panels to make them stand out... the list is endless.

To give you an idea of the radically different designs that can be achieved, take a look at some sample calendars created using ChronoFlo Calendar. See here, here, here and here.

They're lovely designs, I'm sure you'll agree. But, you might justifiably wonder, how does that help me when all my calendar data is already in Google and I don't want to have to enter it into a new system? Well, you don't have to enter the events again. ChronoFlo Calendar can be made to display your Google Calendar data. You can continue to add or edit events in Google calendar and your changes will automatically be reflected in the ChronoFlo version of the calendar.

So you get the best of both worlds - the security, power and rock solid admin interface of Google and the visual flair of ChronoFlo Calendar. You actually get more than this. As well as being beautiful, ChronoFlo calendars feature an integrated timeline that makes navigating through your calendar much simpler and more fun. The timeline allows you to see at a glance potentially hundreds of events covering several years, rather than limiting you to just the events in the currently-selected month, as Google does.

Okay, pitch over. Let's now take you through the process of displaying your Google events in a ChronoFlo calendar.

1 Sign up for a ChronoFlo account and create your first calendar

We're not going to take you through all the steps to getting a ChronoFlo account and creating your first calendar in this tutorial, because we have already written a dedicated guide to doing that. Go read it here and come back once you have an account, and have created your first calendar. Please note that you will need a premium account in order to use your Google Calendar data in a shared or embedded ChronoFlo calendar.

2 Obtain an .ics file for your Google calendar

Several years ago, some bright spark devised a special format for storing data about calendar events. The format is know as iCalendar and files saved in this format usually have an .ics suffix. We don't need to delve deeply into the iCalendar format. All we need to know is that Google calendar can output your calendar data as an .ics file and then ChronoFlo can use this file to populate your ChronoFlo calendar with that data. Below, we outline how you can get the url of the .ics file for a Google calendar.

1. Open your favourite web browser and go to www.google.com/calendar. You should now see your calendar. If not make, ensure that you are logged into the Google account that owns the calendar.

2. Click on the Settings menu icon (it looks a bit like a gear) at the top right of the screen. Then select the 'Settings' option from the dropdown menu.

3. You should now be taken to a page which contains a list of your calendars in the left column. Select the calendar that you want to use to populate your ChronoFlo calendar.

4. Beneath your calendar's name in the left column, you will now see a list of options. Select the 'Integrate calendar' option.

5. In the Integrate section to the right, look for the 'Public address in iCal format' field and copy the contents of it. We are going to use this address in the next section.

3 Create an iCal feed in ChronoFlo Calendar

Now that we have the web address of your Google calendar's iCal file, we need to enter it in the correct place in ChronoFlo Calendar in order to display your Google Calendar events there. You can do this as follows:

1. Log in to your ChronoFlo account here and select the calendar you created earlier.

2. In the Options panel, click on the 'Create or edit feed' button to open the Feed management panel. Then click on the 'Create new feed' option.

3. In the Feed creation panel that pops up, enter a name for the feed, select iCal from the 'Type' dropdown menu and finally paste into the 'Source' field your Google calendar's iCal address - this is the address we obtained in section 2 of this tutorial.

4. To complete the process, click on the Save button at the bottom right of the Feed creation panel. Your calendar should now start to be populated with events from your Google calendar.

4 Embed the calendar on your website

Once you have checked that your Google calendar events have been loaded, you are going to want to show the world your fancy new calendar. The best way to do this is to embed it on your website. You can obtain the embed code for your ChronoFlo calendar as follows:

1. Log in to your ChronoFlo account here and select the calendar you want to embed.

2. In the Options panel, click on the 'Share or embed your calendar' button and you will be taken to the 'Sharing and embedding' tab.

3. In the 'Sharing and embedding tab', copy the contents of the Embed field and paste it into the HTML of your website. Note that your calendar must be set to 'Shareable' in the top option in order for the embed code to work.

4. Tell everyone about the beautiful new calendar on your website!

We hope you enjoyed this tutorial. If you have any questions, please drop us an email at help@chronoflocalendar.com. To keep up to date with the latest ChronoFlo news and developments, you may want to follow us on Twitter, Facebook and Google Plus.