Mini-Hack: Customizing a Google Embeddable Calendar

 

When I wanted to showcase interesting tech events in a calendar that was easy to update, easy to share,  and that wouldn’t slow my site down, embedding a Google Calendar was clearly the way to go. Although this was the best option, it wasn’t perfect. The calendar worked exactly as I wanted it to, but it’s characteristic light blue background just didn’t fit with the white, black, and grey aesthetic of my website. Thanks to a great tutorial by Dan Rajan for Webdesigner Depot, it was easy to customize the standard calendar to match my site.

Here’s the gist of how to do it:

Since the calendar is hosted on Google.com, you can only customize it as much as Google allows you to through the Calendar Helper interface. You can get around this by hosting the calendar on your own domain then editing the files to reflect the new location and your preferred styles.

The tutorial recommends hosting the HTML file on your site, linking to Google’s original CSS and JavaScript files, and overriding Google’s style using a PHP script and a custom style sheet.

Happy customizing!