PHP Solution for adding a Google Calendar, injecting styles and changing options dynamically.

google_calendar.css

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

#calendarTitle,
.tab-name,
img[title="Print my calendar (shows preview)"],
.footer img,
.details .links a:last-child,
.event-links a:last-child
{display:none;}

.mv-event-container
{border-color:#999;}

.navBack,
.navForward
{ background-image: url(images/combined_v22.png); }

.agenda-more
{ color:#0D75BB; }
.agenda .date-label
{ padding:5px 0px; }
.dp-popup
{background:#fff;}

.view-cap, .view-container-border,
.mv-daynames-table,
.ui-rtsr-selected,
.wk-weektop,
.wk-dummyth,
.date-picker-arrow-on,
.dp-weekend-selected
{ background-color:#dfdfdf; }

.ui-rtsr-unselected,
.mv-daynames-table,
.wk-daynames,
.wk-dayname,
.dp-prev,
.dp-cur,
.dp-next
{ color:#666; }

.ui-rtsr-unselected
{ background-color:transparent;}

.dp-weekday-selected,
.agenda .date-label
{background-color:#efefef;}

.dp-today-selected
{background-color:#fad163;}

.mv-daynames-table,
.wk-daynames
{height:30px; font-size:14px;}

.mv-event-container
{ top:30px;}

google_calendar.html

<!-- by default the iframe shows the month view -->
<iframe id="googleCalendar" style="border: 0;" 
  src="google_calendar.php" 
  height="600" width="100%" 
  frameborder="0" scrolling="no"></iframe>

<!-- add ?v=[VIEW] to the path to force a view -->
<!-- views include month, week, agenda -->
<iframe id="googleCalendar?v=agenda" style="border: 0;" 
  src="google_calendar.php" 
  height="300" width="400" 
  frameborder="0" scrolling="no"></iframe>

google_calendar.php

<?php

// determine path, css filename and view mode
$calendarpath="https://www.google.com/calendar/embed?src=[YOUR GOOGLE CALENDAR ID]&ctz=America/New_York";
$newcss="google_calendar.css";
$defaultview=($_GET["v"]) ? $_GET["v"] : "month";

// import the contents of the Google Calendar page into a string
$contents = file_get_contents($calendarpath);

// add secure Google address to root relative links
$contents = str_replace('<link type="text/css" rel="stylesheet" href="', '<link type="text/css" rel="stylesheet" href="https://www.google.com/calendar/', $contents );
$contents = str_replace('<script type="text/javascript" src="', '<script type="text/javascript" src="https://www.google.com/calendar/'  , $contents );

// inject css file reference
$contents = str_replace('<script>function _onload()', '<link rel="stylesheet" type="text/css" href="'.$newcss.'" /><script>function _onload()', $contents );

// update settings found in javascript _onload() function
$contents = str_replace('"view":"month"', '"view":"'.$defaultview.'"', $contents);
$contents = str_replace('"showCalendarMenu":true', '"showCalendarMenu":false', $contents);
if($defaultview == "month") $contents = str_replace('"showDateMarker":true', '"showDateMarker":false', $contents);
if($defaultview != "month") $contents = str_replace('"showTabs":true', '"showTabs":false', $contents);


echo $contents;

?>

I don't believe this technique works any longer. As of very recently, it seems that Google inserts the styles directly into the calendar HTML; in other words, there are no longer any links to external stylesheets that can be replaced with your custom ones. I was using a technique very similar to what you suggest, and I was notified today that embedded calendars on one of my sites were throwing errors because the code could not find link tags to replace.

This true Ken? Unfortunate if it is. I'm looking for a solution to style the embedded google calendar and this looked promising.

Hmmm tried it anyway. Getting a "Notice: Undefined index: v in C:\wamp\www\google_calendar.php on line 5" and the page just shows the google sign in page.

Hello, this code don't work.. Can you have fix ? Always show "login page Google " :/

I got this to work by making the following edits:

Change the following lines from:
$contents = str_replace('<link type="text/css" rel="stylesheet" href="', '<link type="text/css" rel="stylesheet" href="https://www.google.com/calendar/', $contents );
$contents = str_replace('<script type="text/javascript" src="', '<script type="text/javascript" src="https://www.google.com/calendar/' , $contents );

To:

$contents = str_replace('<link type="text/css" rel="stylesheet" href="//www.google.com/calendar/', '<link type="text/css" rel="stylesheet" href="https://www.google.com/calendar/', $contents );
$contents = str_replace('<script type="text/javascript" src="//www.google.com/calendar/', '<script type="text/javascript" src="https://www.google.com/calendar/' , $contents );

This code works perfectly. The thing is it doesn't return any $_GET variables. That is why you get undefined variable. And the next thing is when you replace your calendar ID, if it has "@" symbol change it to "%40". Example: "[email protected]" to "123%40gmail.com". After one month of time i found this solution. Great work by the author. Thanks a lot!!!! Working full code is below. Actually i didn't use html file. Just the php and css.

$calendarpath="https://www.google.com/calendar/embed?src=[calendar-id]&ctz=America/New_York";

//Custom css path
$newcss="google_calendar.css";

//Iframe contants
$contents = file_get_contents($calendarpath);

// add secure Google address to root relative links
$contents = str_replace('<link type="text/css" rel="stylesheet" href="//www.google.com/calendar/', '<link type="text/css" rel="stylesheet" href="https://www.google.com/calendar/', $contents );
$contents = str_replace('<script type="text/javascript" src="//www.google.com/calendar/', '<script type="text/javascript" src="https://www.google.com/calendar/' , $contents );

//Inject custom css to iframe
$contents = str_replace('<script>function _onload()', '<script>function _onload()', $contents );

//Set up default view.
$contents = str_replace('"view":"month"', '"view":"week"', $contents);

//Hide calendar menu
$contents = str_replace('"showCalendarMenu":true', '"showCalendarMenu":false', $contents);

//Echo calendar
echo $contents;

`
$newcss = 'g_calender.css';
$f = file_get_contents('https://calendar.google.com/calendar/embed?src=[calender_id]&ctz=Asia/Taipei');
$f = str_replace('//calendar.google.com','https://calendar.google.com',$f);
$f = str_replace('/calendar/_','https://calendar.google.com/calendar/_',$f);
$f = str_replace('<script>function _onload()', '<script>function _onload()', $f );

echo $f;
`

Modifying code up i made working (for me) override google_calendar.php file:

`<?php

$newcss = 'google_calendar.css';

$f = file_get_contents('https://calendar.google.com/calendar/embed?src=YOUR_PATH_TO_CALENDAR');
$counter = stripos($f,"static/");
$counter = $counter + 7;
$section = file_get_contents('https://calendar.google.com/calendar/embed?src=YOUR_PATH_TO_CALENDAR', NULL, NULL, $counter, 56);
$f = str_replace("//calendar.google.com/calendar/static/$section",$newcss,$f);
$f = str_replace('/calendar/_','https://calendar.google.com/calendar/_',$f);
$f = str_replace('<script>function _onload()', '<script>function _onload()', $f );

echo $f;
?>`

The problem of this solution is, that the links to import the calendar into own google-calendar and to import single events to your qwn google-calendar don't function, because the links point to an adress of the website, the calendar is embedded, instead to https://calendar.google.com/calendar/event?action=TEMPLATE ... . Any idea to fix this issue?

the project, where I have this issue is http://www.efs-sohland.de/termine

the code of my google_calendar.php is this:
`<?php

$newcss = '/themes/newsplus_lite/google_calendar.css';

$f = file_get_contents('https://calendar.google.com/calendar/embed?showTitle=0&showNav=1&showDate=0&showPrint=0&showTz=0&mode=AGENDA&height=500&wkst=2&hl=de&bgcolor=%23FFFFFF&src=efs.termine%40gmail.com&color=%237A367A&src=dh1veh0qjigl3qk9q3744h1fgo%40group.calendar.google.com&color=%232952A3&src=de.german%23holiday%40group.v.calendar.google.com&color=%23AB8B00&src=7li1jp15itv63kgbo121jdejoo%40group.calendar.google.com&color=%23B1440E&src=cdmbumvbj357vppvc37vm6f80o%40group.calendar.google.com&color=%231B887A&src=hd39i3raup828uoblbbndp4228%40group.calendar.google.com&color=%23B1365F&src=546k86cpml8eegtg0ceejplf1c%40group.calendar.google.com&color=%235F6B02&src=2h6eivd7ug4j4e2s6epvr1hm88%40group.calendar.google.com&color=%2342104A&src=0id8je4bmi39jfpj6venn7ual4%40group.calendar.google.com&color=%232F6309&src=j6206ofej1r2fqfr5bulncne40%40group.calendar.google.com&color=%238C500B&src=k5afnqgufl34uub9ug2a78rb4s%40group.calendar.google.com&color=%2323164E&src=08b1osv1ffa1uehp4j1r19jn2s%40group.calendar.google.com&color=%23333333&src=96uvgnljqceatd89b9rnkkf37c%40group.calendar.google.com&color=%23865A5A&src=nfilb6jj2ntelrdg7r9ulequeo%40group.calendar.google.com&color=%236B3304&ctz=Europe%2FBerlin');
$counter = stripos($f,"static/");
$counter = $counter + 7;
$section = file_get_contents('https://calendar.google.com/calendar/embed?showTitle=0&showNav=1&showDate=0&showPrint=0&showTz=0mode=AGENDA&&height=500&wkst=2&hl=de&bgcolor=%23FFFFFF&src=efs.termine%40gmail.com&color=%237A367A&src=dh1veh0qjigl3qk9q3744h1fgo%40group.calendar.google.com&color=%232952A3&src=de.german%23holiday%40group.v.calendar.google.com&color=%23AB8B00&src=7li1jp15itv63kgbo121jdejoo%40group.calendar.google.com&color=%23B1440E&src=cdmbumvbj357vppvc37vm6f80o%40group.calendar.google.com&color=%231B887A&src=hd39i3raup828uoblbbndp4228%40group.calendar.google.com&color=%23B1365F&src=546k86cpml8eegtg0ceejplf1c%40group.calendar.google.com&color=%235F6B02&src=2h6eivd7ug4j4e2s6epvr1hm88%40group.calendar.google.com&color=%2342104A&src=0id8je4bmi39jfpj6venn7ual4%40group.calendar.google.com&color=%232F6309&src=j6206ofej1r2fqfr5bulncne40%40group.calendar.google.com&color=%238C500B&src=k5afnqgufl34uub9ug2a78rb4s%40group.calendar.google.com&color=%2323164E&src=08b1osv1ffa1uehp4j1r19jn2s%40group.calendar.google.com&color=%23333333&src=96uvgnljqceatd89b9rnkkf37c%40group.calendar.google.com&color=%23865A5A&src=nfilb6jj2ntelrdg7r9ulequeo%40group.calendar.google.com&color=%236B3304&ctz=Europe%2FBerlin', NULL, NULL, $counter, 56);
$f = str_replace("//calendar.google.com/calendar/static/$section",$newcss,$f);
$f = str_replace('/calendar/_','https://calendar.google.com/calendar/_',$f);
$f = str_replace('<script>function _onload()', '<script>function _onload()', $f );

$f = str_replace('<script type="text/javascript" src="//www.google.com/calendar/', '<script type="text/javascript" src="https://www.google.com/calendar/' , $f );

echo $f;
?>
`

Hi there,

I'm don't have a clue about coding except for HTML and CSS.
Is it possible to make three minor changes with CSS?
Here is a screenshot:

Can I:

1. Change the color and delete the underline of the earlier & later events links (the google calendar seems to override GeneratePress theme’s stylings?).
2. Change the color of the table.
3. Get rid of the “more details” link (after clicking an event, when it opens the additional infos)? All the infos are already shown and I don’t want people to leave my site to go to google calendar site.

Thanks for your help!
Andi

Since I can not use file_get_contents, I've rewritten curl. My Code ist

<?php
$newstyle='google_calendar.css';
$url="URL TO CALENDAR;
$ch=curl_init();
curl_setopt($ch,CURLOPT_URL,$url);
curl_setopt($ch,CURLOPT_HEADER,0);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,0);
$buffer=curl_exec($ch);
curl_close($ch);

$counter=stripos($buffer,"static/");
$counter=$counter+7;
$section=file_get_contents('URL TO CALENDAR',NULL,NULL,$counter,56);

$buffer=str_replace("//calendar.google.com/calendar/static/$section",$newstyle,$buffer);
$buffer=str_replace('/calendar/_','https://calendar.google.com/calendar/_',$buffer);
$buffer=str_replace('<script>function _onload()','<script>function _onload()',$buffer);
$buffer=str_replace('<script type="text/javascript" src="//www.google.com/calendar/','<script type="text/javascript" src="https://www.google.com/calendar/',$buffer);
$buffer=str_replace('"baseUrl":"/"','"baseUrl":"https://www.google.com/"',$buffer);
echo $buffer;
?>

How can I rewrite these three lines so I do not need to use file_get_contents.

$counter=stripos($buffer,"static/");
$counter=$counter+7;
$section=file_get_contents('URL TO CALENDAR',NULL,NULL,$counter,56);

I insert this three lines

$search = '/(<link.*>)/';
$replacement = '<link rel="stylesheet" type="text/css" href="' . $newstyle . '" />';
$buffer = preg_replace($search, $replacement, $buffer);

And now everything works with curl.

My Complete Code is

<?php
$newstyle='google_calendar.css';
$url="URL TO CALENDAR;
$ch=curl_init();
curl_setopt($ch,CURLOPT_URL,$url);
curl_setopt($ch,CURLOPT_HEADER,0);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,0);
$buffer=curl_exec($ch);
curl_close($ch);
$search = '/(<link.*>)/';
$replacement = '<link rel="stylesheet" type="text/css" href="' . $newstyle . '" />';
$buffer = preg_replace($search, $replacement, $buffer);
$buffer=str_replace('/calendar/_','https://calendar.google.com/calendar/_',$buffer);
$buffer=str_replace('<script>function _onload()','<script>function _onload()',$buffer);
$buffer=str_replace('<script type="text/javascript" src="//www.google.com/calendar/','<script type="text/javascript" src="https://www.google.com/calendar/',$buffer);
$buffer=str_replace('"baseUrl":"/"','"baseUrl":"https://www.google.com/"',$buffer);
echo $buffer;
?>

@GuitarAndi

Ich glaub du sprichst deutsch wenn ich mir den Kalender so anschaue. Früher mit der alten restylegc.php stand es immer so drin

URL for overriding stylesheet
The best way to create this stylesheet is to

1. Load "http://www.google.com/calendar/embed?src=user%40domain.tld" in a
   browser,
2. View the source (e.g., View->Page Source in Firefox),
3. Copy the relative URL of the stylesheet (i.e., the href value of the tag),
4. Load the stylesheet in the browser by pasting the stylesheet URL into
   the address bar so that it reads similar to:
   "http://www.google.com/calendar/d003e2eff7c42eebf779ecbd527f1fe0embedcompiled.css"
5. Save the stylesheet (e.g., File->Save Page As in Firefox)
   Edit this new file to change the style of the calendar.

As an alternative method, take the URL you copied in Step 3, and paste it
in the URL field at http://mabblog.com/cssoptimizer/uncompress.html.
That site will automatically format the CSS so that it's easier to edit.

Dann suchst dir einfach die jeweiligen Klassen raus und änderst sie. In deinem Fall z.b.

1. .agenda-more, a

dort steht bei mir als Änderung

.agenda-more, a {
 background-color:transparent;
 color:#000000;
 cursor:pointer;
 text-decoration:underline;
 white-space:nowrap
}
.agenda-more:visited, a:visited {
 background-color:transparent;
 color:#000000;
 cursor:pointer;
 text-decoration:underline;
 white-space:nowrap
}
.agenda-more:hover,.agenda-more:active, a:hover, a:active,.agenda-more:hover,.agenda-more:active, a:hover, a:active {
 background-color:transparent;
 color:#808080;
 cursor:pointer;
 text-decoration:underline;
 white-space:nowrap
}

2. das wäre

.view-cap,.view-container-border {
 background-color:#f5f5f5
}

und

.agenda .date-label {
 font-weight:bold;
 background:#e0e0e0;
 position:relative
}

und das dritte wenn ich es richtig verstanden habe willst du das nicht anzeigen

.agenda .event-links a:first-child {
	display:none; 
}

Bei mir sieht das so aus....

` $newcss = 'g_calender.css'; $f = file_get_contents('https://calendar.google.com/calendar/embed?src=[calender_id]&ctz=Asia/Taipei'); $f = str_replace('//calendar.google.com','https://calendar.google.com',$f); $f = str_replace('/calendar/_','https://calendar.google.com/calendar/_',$f); $f = str_replace('<script>function _onload()', '<script>function _onload()', $f );

echo $f; `

this works perfectly