Customising an embedded google calendar

Hi. I’m eager to use this promising technique. But when i download as you describe, i get a file that includes the actual events, hard-coded. That’s no good, as the file will not refresh when events are added or edited, nor will it provide scrolling to future and past events.

Am i doing this wrong?

Thanks!

This is great – exactly what I was looking for! I’ve successfully customized the embedded calendar on my site, and it looks great. The only thing that I need to know is how to change is the format of the “date-label”. Currently, each event has a date-label formatted like this: Friday, 18 July. I would like it to be formatted like this: Friday, July 18. I checked my Google Calendar settings; the Date Format is set to 12/31/2011 and the Language is English (US). I thought that maybe changing the “dateFieldOrder” entry in the markup from “0″ to “1″ might fix it, but no luck. If anyone has an idea of how to reformat the date, I would be grateful for your advice! Thanks!

Hi all,
Thanks for presenting this very clever idea, and hopefully lots of people can get benefit from this. Following the pointers in this article, I’ve prepared the code necessary for doing this. You need to create 2 files: custom_calendar.php (the actual calendar file) and custom_calendar.css (a CSS file to style the calendar to your liking). The first file is the main one that makes this possible; the second file allows you to change any of the CSS properties. Figuring out which CSS properties to change to make this suit your exact needs will probably take some experimentation and reverse-engineering.

Your website needs to be able to serve PHP files for this to work.

custom_calendar.php


<?php
$your_google_calendar="https://www.google.com/calendar/embed?src=usa__en@holiday.calendar.google.com&gsessionid=OK";
$url= parse_url($your_google_calendar);
$google_domain = $url['scheme'].'://'.$url['host'].dirname($url['path']).'/';

// Load and parse Google's raw calendar
$dom = new DOMDocument;
$dom->loadHTMLfile($your_google_calendar);

// Change Google's CSS file to use absolute URLs (assumes there's only one element)
$css = $dom->getElementByTagName('link')->item(0);
$css_href = $css->getAttributes('href');
$css->setAttributes('href', $google_domain . $css_href);

// Change Google's JS file to use absolute URLs
$scripts = $dom->getElementByTagName('script')->item(0);
foreach ($scripts as $script) {
$js_src = $script->getAttributes('src');
if ($js_src) $script->setAttributes('src', $google_domain . $js_src);
}

// Create a link to a new CSS file called custom_calendar.css
$element = $dom->createElement('link');
$element->setAttribute('type', 'text/css');
$element->setAttribute('rel', 'stylesheet');
$element->setAttribute('href', 'custom_calendar.css');

// Append this link at the end of the element
$head = $dom->getElementByTagName('head')->item(0);
$head->appendChild($element);

// Export the HTML
echo $dom->saveHTML();
?>


custom_calendar.css


.dp-cur, .chip dt, .te, .te-t, .te-rev-s, .rb-n, .rb-i, .agenda, .event-title{
white-space:normal !important;
}


In many places having the lines wrap will “mess up” the appearance of the calendar by creating lots of gaps between events. You may need some experimentation to get it to look right for your site.

Because of the way that Google outputs the calendar entries, it puts them into a table. In some cases, when one of the items in that table becomes higher than one line (because of our enabling word-wrapping), the entire row that it’s in becomes higher than it needs to be. This creates the appearance of blank lines underneath some of the entries. There is no way to work around this issue since it’s based on how Google exports the calendar information.

It is nice to be able to display multiple lines, however, it’s just a bit of a shame that the formatting doesn’t come out more cleanly.

Genius. THANK YOU!!!

This is very cool until Google changes the name of your js file and your calendar goes blank. I guess that this would happen even if you embed the way they tell you to. strange.