Integrating Google Calendar with your website

Default avatar.
April 09, 2012

Google Calendar is a great tool to embed in your site, and it’s incredibly easy to do using an iFrame. Before I go into further styling for the Calendar, I’ll quickly go through how to embed your Google Calendar anywhere into your site. You can embed a live calendar for other to edit along with you, or privately edit it whilst all visitors can see your updates to events as they happen. All this is done with Google’s trademark simplicity and ease of use, however if you wish to use CSS to further style your calendar, you’ll need to spend a little time tweaking with trial and error to get it to your liking. First, you need to select the calendar which you wish to embed on your site under the Calendars’ tab of your settings page.  The iFrame code is available on the following page, as shown below, however you can further customize the calendar within Google.  In the interface you are given, you can adjust basic settings, such as title, colors, and what elements to display. The iFrame code above will update as you make changes to the settings. Once you’re happy with you basic settings, you can drop the code anywhere you want in your site, since it’s simply HTML The settings offered by Google are only basic, however, and so for it to fit the unique style of your site, you’ll want a bit of extra editing power. Unfortunately adding CSS rules to the parent document doesn’t work, even when adding an !important directive to each rule. The reason for this is twofold: 1. The host document and the document in the iFrame are completely separate. This seems an obvious statement to make but quite easy to overlook none the less. 2. The document in the iFrame is hosted on a separate domain (Google​.com) which of course means that most browsers will block any attempt made from another domain to modify content within that document. Looking at the iFrame code from earlier, you can see the a snippet of code, similar to the following:

https://www.google.com/calendar/embed?src=u3o22apdee61g5k1qised1d56k%40group.calendar.google.com&ctz=Europe/London

This is where your iFrame points to, and is the location of the base document for your calendar. Go to the URL and view the source, using your browser or any preferred tool. Create a new page on your site with the markup retrieved from the URL source, there are only two lines in the code that need updating:

<link type=“text/css” rel=“stylesheet” href=“969ff39784188d8d017a0c60c8f2558aembedcompiled_fastui.css”>
<script type=“text/javascript” src=“969ff39784188d8d017a0c60c8f2558aembedcompiled__en_gb.js”></script>

As you can see, both tags contain relative URLs, they need prefixing with https://​www​.google​.com/​c​a​l​e​ndar/” so they look like this:

https://​www​.google​.com/​c​a​l​e​n​d​a​r​/​969​f​f​39784188​d​8​d​017​a​0​c​60​c​8​f​2558​a​e​m​b​e​d​c​o​m​p​i​l​e​d​_​f​a​s​t​u​i.css
https://​www​.google​.com/​c​a​l​e​n​d​a​r​/​969​f​f​39784188​d​8​d​017​a​0​c​60​c​8​f​2558​a​e​m​b​e​d​c​o​m​p​i​l​e​d​_​_​e​n​_​gb.js

This points your iFrame to the new page on your domain and not Google’s, meaning it is (effectively) hosted by you. The next step is to add custom CSS declarations to the new document to override elements in the Google calendar. You’ll need to create 2 new PHP files, the first: custom_calendar.php is the actual calendar file, and custom_calendar.css, a CSS file to style the calendar. The first file is the main one that makes this possible; the second file allows you to change any of the CSS properties. With a little CSS magic, you should be able to customize it further to fit your site perfectly! Custom Calendar Code

CSS

Now you’ve got your Calendar all set up you’ll want to change the CSS to match your site’s needs and, most probably, color scheme. The classes you will want to be looking at are below. Firstly, to fit your color scheme you may wish to edit the overall border/​background color of the Calendar. To do this add .view-cap, .view-container-border to the CSS and change the background to your chosen color.

.mv-dayname

This is the class that controls the names of the days at the top of the Calendar. Simply add .mv-dayname to your custom_calendar.css and add some variables to get started. There is also a .mv-daynames-table which controls the cell that each name of each day sits in. Remember to also change the color of the borders as well as the background itself.

.st-bg

This is the class that controls the background of each of the cells. There is also .st-bg-today and .st-bg-next which control the display of the current day and tomorrow allowing you to distinguish between them.

.st-dtitle

This class controls the dates of the days in the Calendar. Also, helpfully, Google have included .st-dtitle-today and .st-dtitle-next which are the classes that control the display of the dates of the current day and the next day respectively. These classes are useful for highlighting today and tomorrow. Also, within the .st-dtitle class there is .st-dtitle-nonmonth which is the class that controls the display of the text for dates in a new month that are not present in the current month. Another important class to remember when editing .st-bg and using .st-dtitle is .st-dtitle-down this is applied to the cell below todays; when default this has a border at the top which matches the border surrounding the current day. By changing .st-bg, .st-bg-today, .st-dtitle and .st-dtitle-today the following example was created.  Here’s the CSS:

.st-bg { background:black; }
.st-bg-today { background:yellow; border-left:1px solid yellow; border-right:1px solid yellow; }
.st-dtitle { background:white; }

With .view-cap, .view-container-border set to black and .mv-dayname-table set to white the following result is created.  Here’s the CSS code:

.view-cap, .view-container-border { background-color:black; }
.mv-daynames-table { color:white; background:black; }
.mv-event-container { border-top:1px solid black; }

The borders on the cells can be removed by editing the border-left, border-right and border-top classes within the CSS of each of the classes, as the example below shows.  Here’s the code:

.st-bg { border-left:none; }
.st-dtitle { border:none; background:white; }

By using these CSS classes you will be able to customize your Google Calendar and integrate it fully with the rest of your site.

Dan Rajan

Dan Rajan is a film student, creative content designer, and passionate writer from the UK, follow him on twitter!

Read Next

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…

3 Essential Design Trends, March 2023

One thing that we often think about design trends is that they are probably good to make a list. That’s not always true…