How To: Customizing Google's Web Elements Calendar

Customizing Google Web Elements Calendar

Looking on Google's Web Elements Calendar FAQ quickly shows that the css, that is the overall look at that standard blue, is not customizable.

Ok so this is annoying! Their must be a way around this?

YES thanks to some tricks.  I did this quickly so it could have been a bit better.

I'm going to use PHP's cURL function to grab the calendar, change some things around and then spit it all out.

<?php

// set URL

$url = "http://www.google.com/calendar/embed?mode=AGENDA&showTitle=0&showTabs=0&showPrint=0&showCalendars=1&wkst=1&element=true&src=info%40brassknucklesband.com";

$data = get_data($url);



//replace googles' javaScript with your local file.

// this str_replace should be rewritten to use preg_replace where it looks for d*.js

$data = str_replace('src="d1e9468602c24f5a9d74e9c6eb0ec71fembedcompiled__en.js','src="gcembedcompiled__en.js',$data);

//creates an absolute url to google

$data = str_replace('href="d','href="http://www.google.com/calendar/d',$data);

//inserts your own custom css file

$data = str_replace('.css">','.css"/><link type="text/css" rel="stylesheet" href="customgcal.css"/>',$data);



echo $data;



function get_data($url)

{

$ch = curl_init();

$timeout = 5;

curl_setopt($ch,CURLOPT_URL,$url);

curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);

curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);

// grab URL and pass it to the variable $data

$data = curl_exec($ch);

// close cURL resource, and free up system resources

curl_close($ch);

// Check if any error occured

if(curl_errno($ch))

{

return false;

}

return $data;

}



?>

So what this does is curl's the web element calendar then replaces Google's JavaScript with your local copy, creates an absolute URL to Google and then adds an absolute URL to your own css file.


You can't use their version of the JavaScript file as the Ajax functionality will be broken. Get their .js file by right clicking on your calendar web element and choosing this frame->view source. Then click on the .js and the file will open. Save it to your local machine with the filename gcembedcompiled__en.js, it should be in the same directory as the php code above. On or around line 133 change this.e=this.b+"calendar/feeds"}; TO this.e="http://www.google.com/calendar/feeds"};


Create a new css file, call it customgcal.css. Start adding the code in to there that you want to change, here's a small sample of what you could do:

.view-cap, .view-container-border {
    background-color: gray;
}
.agenda .date-label {
    background:none repeat scroll 0 0 gray;
}
.agenda .event {
    border-top:1px solid #000;
}

And lastly change your iframe source to the new PHP file  <iframe etc="" src="myphpfile.php">

Ok that's a quick glimpse and what I did to overcome this current limitation. I hope you are inspired to improve on this..
Feel free to post the line above change to a preg_replace.