Maintaining restyled Google Calendar

RESTYLEgc is a pretty old (2008-11) MIT-licensed project by Brian Gibson, which enables, among other things, replacing the default stylesheet of embedded Google Calendar with a custom one.

Due to various changes on Google’s side made since 2011, the version available from Google Code link above no longer works. So I put up a GitHub repo with slightly modified files; only the two PHP scripts and the CSS file are included, the optional resources are not. (February 2017 update: a JS file is added.)

Keeping up with the changes in Google URL structure

Line 120 of restylegc.php changed from

$url = "" . $_SERVER['QUERY_STRING'];


$url = "" . $_SERVER['QUERY_STRING'];

Line 19 of restylegc-js.php changed from

$url = "" . $_SERVER['QUERY_STRING'];


$url = "https:" . $_SERVER['QUERY_STRING'];

Line 42 of restylegc-js.php changed from

$replacement = '"';


$replacement = '"';

February 2017 update

Google changed the link to the JavaScript file that runs the calendar; it is no longer a direct link to a .js file. (This resulted in the iframe erroring out with “window._init is not a function” and such; the function was defined in the JS file that failed to load.)

To correct the issue, I did the following:

Lines 137-138 of restylegc.php changed from

$pattern = '/src="(.*js)"/';
$replacement = 'src="restylegc-js.php?$1"';


$pattern = '/javascript" src="(\/calendar\S*)"/';
$replacement = 'javascript" src="restylegc-js.php?$1"';

Uncommented line 29 of restylegc-js.php, changing it from

//$url = "http://myserver.tld/path/to/archive/e0437df6468589031e718f3606b03917embedcompiled__en.js";


$url = "gcal.js";

Downloaded the JavaScript file used by the calendar, so that it’s served locally. (This is the gcal.js file referred to above.)

The rest of the post describes cosmetic changes made in the GitHub repo, which are not required for the calendar to work.

Better wrapping of text in narrow calendars

Line 1181 of restylegc.css (rules for .agenda .event-summary, .agenda .event-summary-expanded) changed




Line 1263 of restylegc.css (rules for .agenda .event-summary-expanded) changed




Also (line 1323) added


to the rule

.ie6 .agenda .event-title

although in 2015, IE6 isn’t quite as big a deal anymore.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s