Menu
I've embeded a google calendar displaying multiple calendars in my website, but I want to have the calendars displaying in colors other than the default options.
The request URL contains a color parameter for each calendar, but doesn't seem to accept non default colors. (The rendered colors also don't seem to be the same as these)
Looking at the source; the colors for each event are defined by inline CSS, and do not appear to have class or ID attributes that could be used to style them via a CSS file.
I've tried using PHP to get the html of the calendar and then use string replace to change the colors (based on this answer) which works, except it doesn't change the colors The PHP file I'm using:
<?php
$content = file_get_contents('https://www.google.com/calendar/embed?showTitle=0&showPrint=0&showTabs=0&showTz=0&height=750&wkst=2&bgcolor=%23FFFFFF&src=1.keswickscouts.org_5d750s21fh55t45nsh4i49co5g%40group.calendar.google.com&color=%23691426&src=1.keswickscouts.org_k8ai784s6meu1eh71fk21etseg%40group.calendar.google.com&color=%23182C57&src=1.keswickscouts.org_4omjhqh48ud1lkigino18dmid0%40group.calendar.google.com&color=%232F6309&src=06illa48gj7en6896jv32cm93c%40group.calendar.google.com&color=%23125A12&src=1.keswickscouts.org_m6mb8idejtptmfkve9gm6latd8%40group.calendar.google.com&color=%236B3304&src=1.keswickscouts.org_5uaafulf65hrc4b64j3bfa6660%40group.calendar.google.com&color=%235229A3&src=1.keswickscouts.org_qudhcb0ii68u6b5mgs2ase200o%40group.calendar.google.com&color=%23B1365F&ctz=Europe%2FLondon');
$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />',$content);
$content = str_replace('B5515D','CC9966', $content); //ASU
$content = str_replace('536CA6','099FF', $content); //Beavers
$content = str_replace('7EC225','33CC00', $content); //Cubs
$content = str_replace('125A12','006990', $content); //Eden
$content = str_replace('194D14','999966', $content); //Explorers
$content = str_replace('8C66D9','4D2177', $content); //Group
$content = str_replace('E67399','006666', $content); //Scouts
echo $content;
?>
Any sugestions? Simpler would be better
274
This is tricky because the Google calendar you link to loads its elements dynamically with javascript so there is nothing to be changed by the potential solution you post.
The HTML-only version of the calendar doesn't have the variety of colours you're looking for, so that won't work either.
Further complications arise because the javascript rebuilds the calendar's body when the user resizes or moves between months. So even if you get the colouring right for the page load, it may not stay the way you want it to.
One solution is to continue to import the calendar to a local page to avoid cross-site restrictions, then get things right on the page load and fight to keep them that way by continuously checking for changes. I'm not sure if there is a more efficient way:
LOCAL CALENDAR PAGE: cal.php
<?php
$content=file_get_contents("https://www.google.com/calendar/embed?showTitle=0&showPrint=0&showTabs=0&showTz=0&height=750&wkst=2&bgcolor=%23FFFFFF&src=1.keswickscouts.org_5d750s21fh55t45nsh4i49co5g%40group.calendar.google.com&color=%23691426&src=1.keswickscouts.org_k8ai784s6meu1eh71fk21etseg%40group.calendar.google.com&color=%23182C57&src=1.keswickscouts.org_4omjhqh48ud1lkigino18dmid0%40group.calendar.google.com&color=%232F6309&src=06illa48gj7en6896jv32cm93c%40group.calendar.google.com&color=%23125A12&src=1.keswickscouts.org_m6mb8idejtptmfkve9gm6latd8%40group.calendar.google.com&color=%236B3304&src=1.keswickscouts.org_5uaafulf65hrc4b64j3bfa6660%40group.calendar.google.com&color=%235229A3&src=1.keswickscouts.org_qudhcb0ii68u6b5mgs2ase200o%40group.calendar.google.com&color=%23B1365F&ctz=Europe%2FLondon");
$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />',$content);
print $content;
?>
Calendar Display Page
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language='javascript'>
var oldhtml;
function swapcolors(oldcolor, newcolor){
console.log("Searching for " + oldcolor);
$('iframe#gcal').contents().find('.rb-n').filter(
function() {
console.log(this);
console.log($(this).css('background-color'));
console.log($(this).css('background-color')==oldcolor);
return $(this).css('background-color')==oldcolor;
}
).css({'background-color': newcolor});
}
function recolor(){
swapcolors('rgb(83, 108, 166)', '#099FF'); //Beavers
swapcolors('rgb(126, 194, 37)', '#000000'); //Cubs 33CC00
swapcolors('rgb(181, 81, 93)', '#CC9966'); //ASU
swapcolors('rgb(18, 90, 18)', '#006990'); //Eden
swapcolors('rgb(25, 77, 20)', '#999966'); //Explorers
swapcolors('rgb(140, 102, 217)', '#4D2177'); //Group
swapcolors('rgb(230, 115, 153)', '#006666'); //Scouts
}
function keepcolored(){
if( $('iframe#gcal').contents()!=oldhtml){
recolor();
oldhtml=$('iframe#gcal').contents();
}
}
$(document).ready(
function() {
$('iframe#gcal').load(recolor);
oldhtml=$('iframe#gcal').contents();
window.setInterval(keepcolored, 700);
}
);
</script>
</head>
<body>
<iframe id="gcal" style="width:100%;height:100%" src="cal.php">
</iframe>
</body>
</html>
Note that find('.rb-n') may need to be adjusted and that background colours are converted to RGB values (ala rgb(230, 115, 153)) before they are returned.
145
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
