Unitz LLC
Home   |   Unitz News   |   Contact Us

Easy Color Customization for Embedded Google Calendars

Bookmark and Share
Posted by Chris Dornfeld at 2:07 pm on April 21, 2009 • Programming,User interfaces

Clients often come to us for assistance integrating an events calendar into a web site, and we frequently recommend Google Calendar.  It has a flexible and user-friendly interface for both web site visitors and calendar managers.  What it doesn’t have, unfortunately, is a way to customize its color scheme.

I had the opportunity to tackle this shortcoming for a recent project and you can find a copy of my script below, followed by an explanation of the approach I used. With this script, you’ll be able to set your own color scheme for an embedded Google Calendar. To illustrate, here are some screenshots showing “before” (on the left) and “after” (on the right):

gcalendar-wrapper screenshots

Of course, you can use this script to make your embedded calendar appear any color you like.

Requirements

Check your phpinfo screen to see if your server meets the requirements — or, if you’re feeling lucky, just cross your fingers and run the script.

Installation and Usage

1. Create your Google Calendar and embed the calendar on your web site using your preferred size and settings. Make sure it appears correctly with the default Google Calendar “skin”.

2. Download the wrapper script (version 2010-11-15) as a ZIP file

3. Unzip the archive to extract the script itself, gcalendar-wrapper.php

4. Edit gcalendar-wrapper.php in a text editor, such as Notepad

5. Customize the following lines at the top of the script according to your needs:

23
24
25
26
27
28
29
30
/**
 * Set your color scheme below
 */
$calColorBgDark      = '#c3d9ff';	// dark background color
$calColorTextOnDark  = '#000000';	// text appearing on top of dark bg color
$calColorBgLight     = '#e8eef7';	// light background color
$calColorTextOnLight = '#000000';	// text appearing on top of light bg color
$calColorBgToday     = '#ffffcc';	// background color for "today" box

You can use a tool like the one at html-color-codes.info to pick your HTML color codes.

6. Upload gcalendar-wrapper.php to your web server

7. On the pages where you display an embedded Google Calendar, change the calendar embedding code to point to gcalendar-wrapper.php instead of http://www.google.com/calendar/embed (or the equivalent URL if you’re using Google Apps for Domains).  For example, if your embedding code currently looks like this:

<iframe src="http://www.google.com/calendar/embed?src=usa__en%40holiday.calendar.google.com
&amp;ctz=America%2FNew_York" style=" border-width:0 " width="800" height="600"
frameborder="0" scrolling="no"></iframe>

edit the HTML to look like this instead:

<iframe src="gcalendar-wrapper.php?src=usa__en%40holiday.calendar.google.com
&amp;ctz=America%2FNew_York" style=" border-width:0 " width="800" height="600"
frameborder="0" scrolling="no"></iframe>

8. Browse to your page to test out your customized calendar! If you still see the standard Google Calendar appearance, make sure to clear your browser’s cache and try again.

Limitations

To keep things simple, this script reduces the Google Calendar color scheme to just 5 different colors, even though Google’s original stylesheet uses more shades. In addition, images within the interface (such as the month previous/next arrows and Print icon) can’t be customized and will still appear in their original color (blue).

After creating this solution, I came across a similar skinning effort called MyGoogleCal4 RESTYLEgc that allows more fine-grained control over the calendar appearance.  It takes more legwork to create your own theme, but anyone interested in replacing the calendar graphics or making advanced stylesheet changes should definitely give it a look.

Technical Details

The gcalendar-wrapper.php script works by downloading the embedded Google Calendar source code from Google’s server, modifying CSS styles and JavaScript on the fly, then outputting the customized calendar code to the user’s browser. The Google Calendar embedding code contains a JSON-encoded data structure with information about the calendar events plus external links to a JavaScript library and CSS stylesheet located elsewhere on Google’s servers. For simplicity, this script just inserts new CSS and JavaScript directly into the main embedding code to override the relevant parts of those external files.

To change the color scheme, I started by scraping the stock Google Calendar stylesheet and identifying the minimal set of styles needed to apply new colors. New style rules are generated dynamically based on the color scheme settings to save the hassle of repeatedly copying and pasting color codes in several places. These custom styles are then inserted at the end of the HEAD section of the embedding code with priority set to override the original styles.

Google Calendar’s code makes use of relative links and file references that get thrown off when routed through the wrapper script, so it’s also necessary to make a change to the base URL within the JSON data structure that holds calendar event data. The JSON string first has to be spliced out using a regular expression and converted to a PHP data structure we can manipulate, then serialized back into a JSON string to replace the original data.

Keep in Mind…

The calendar customization script is closely tied to Google Calendar’s underlying stylesheets and JavaScript code.  When Google launches a new version of Google Calendar (as they’ve done in the past when launching new features) this script may need to be updated to reflect Google’s changes.  When that happens, your embedded calendars may revert to the standard Google Calendar appearance or may even show an error message.  Don’t forget to check up on your calendars periodically so you’ll know if Google has made any major changes.  I’ll make an effort to post an updated wrapper script whenever I see that Google has revised its code.

Feel free to respond in the comments below with questions or suggestions. I hope you find the script useful!

178 Comments »

  1. Great stuff, thanks!

    Comment by Jon at 10:33 pm on May 11, 2009

  2. Thank you! This is by far one of the best Google Calendar helps out there. Bravo!

    Comment by Bryan at 6:10 pm on May 26, 2009

  3. Thanks so much! I am a volunteer at an animal shelter, and I’m trying to get a calendar up on the website that will work with the rest of the web design. I haven’t tried it out yet, but this looks like just the help I needed!

    Comment by Caitlin at 12:05 pm on May 27, 2009

  4. Great script Chris, but i got one Q… i got calendar language on my site to be spanish or some other then english ?? What can i do to change that ? When i embade original iframe src its on english ok ..

    Comment by oserk at 7:52 am on May 29, 2009

  5. Re #4: I haven’t been able to reproduce the language issue you described, but you can force the Google Calendar interface to appear in English by adding the parameter &hl=en to the end of your embedding URL. You can also substitute a different language code as appropriate (fr=French, de=German, etc.).

    Comment by Chris Dornfeld at 12:18 pm on June 1, 2009

  6. I attempted to use this but nothing shows up where the calendar should be. The space is there but it’s just white. Does this mean that the server does not have the correct software?

    Comment by Chris at 9:50 am on June 3, 2009

  7. Hi, I attempted to use the code, but it doesn’t quite work. Is there anything else I need to do but simply replace “http://www.google.com/calendar/embed”.
    Because the rest of that link to the calendar doesn’t actually look like what you posted. Now google just points to the user’s ID without “calendar.google.com.”

    Thanks.

    Comment by jackee at 3:03 pm on June 30, 2009

  8. (#7 was resolved by enabling public calendar sharing in the Google Calendar settings.)

    Comment by Chris Dornfeld at 4:14 pm on June 30, 2009

  9. Worked perfectly! Give yourself a raise!

    THANK YOU!!!!

    Comment by C. Wade at 1:56 pm on July 20, 2009

  10. Works great. Thanks very much for this. The only issue I have is that it fairly regularly gives an error “Moved Temporarily The document has moved here”. When I click on the “here”, it gives me the calendar with normal google colors. If you go to my website, you may be able to see this.

    Comment by Phil at 3:50 pm on August 4, 2009

  11. Re #10: I have posted a new version of the script that addresses the “Moved Temporarily” issue (that message may appear intermittently when viewing a calendar using the wrapper script). You can download the updated version (dated 2009-08-07) using the link in the article above. Note that your web server must have the following settings in place for the fix to take effect:

    - The cURL module must be enabled, with libcurl library version 7.15.2 or higher
    - PHP’s safe_mode setting must be turned Off
    - PHP’s open_basedir setting must be disabled (“no value”)

    You can verify those on your phpinfo screen (see “Requirements” above). If your server doesn’t match these settings and you can’t change them, no problem; the wrapper script will still work, though you may still see the “Moved” screen occasionally.

    Comment by Chris Dornfeld at 6:53 pm on August 7, 2009

  12. You stated that “images within the interface (such as the month previous/next arrows and Print icon) can’t be customized and will still appear in their original color (blue).”

    However, I was able to change those images by copying the original google gif used for these images (calendar.google.com/googlecalendar/images/combined_v9.gif), altering it, uploading it to my site, and then adding some overriding CSS code to point it to the new image instead of the old. In fact, as far as I can tell – I can use your script to override *any* Google css as long as I can identify the class or ID used to control it. It has been VERY helpful Thanks for this solution – I’d been researching for HOURS on how to override Google’s css code and you script made it painfully easy given how many other things I’d tried.

    Comment by Baraslan at 10:37 am on August 28, 2009

  13. EDIT: My previous comment implied you could change the print Icon. It appears this is not controlled in the CSS but hardcoded in one of the JS files the application calls, so I have been unable to find a way to change it. However the image used for the previous/next arrows *are* referenced in the CSS so those *can* be changed.

    Comment by Baraslan at 11:39 am on August 28, 2009

  14. Hi Baraslan, thanks for your comments. When the instructions say the interface images “can’t be customized,” that is just to say that the gcalendar-wrapper script itself doesn’t provide an easy way to substitute your own images. As you said, with some further CSS hacking it’s possible to swap out some of the calendar graphics.

    Comment by Chris Dornfeld at 11:56 am on August 28, 2009

  15. Mine is not showing up at all- although it did when it was just regular google calendar. It is supposed to be at the bottom left corner on this page: http://saladowine.com/.

    Can you please take a look when you have a moment, I must have messed something up in my code or perhaps don’t have the requirements. Thank you!
    Liz

    Comment by Liz O. at 12:01 pm on August 28, 2009

  16. (#15 was resolved by installing the PEAR::Services_JSON package on a server running an older version of PHP.)

    Comment by Chris Dornfeld at 12:52 pm on August 28, 2009

  17. attempting to use this, have latest php on my godaddy hosting plan.

    error i receive when calendar tries to launch

    note i have replaced my username with USERNAME to protect identity.

    Warning: main(Services/JSON.php) [function.main]: failed to open stream: No such file or directory in /home/content/b/l/o/username/html/gcalendar-wrapper.php on line 262

    Fatal error: main() [function.require]: Failed opening required ‘Services/JSON.php’ (include_path=’.:/usr/local/lib/php’) in /home/content/b/l/o/username/html/gcalendar-wrapper.php on line 262

    any help would be greatly appreciated!

    Comment by Jen G. at 3:43 pm on September 8, 2009

  18. (#17 was resolved by renaming gcalendar-wrapper.php to gcalendar-wrapper.php5 on GoDaddy hosting.)

    Comment by Chris Dornfeld at 4:44 pm on September 8, 2009

  19. So…. How do you set a background color for the iframe? It’s there and the colors are set, but there’s a little white triangle where the rounded corners are…

    Comment by mdr6273 at 4:51 pm on September 24, 2009

  20. Was working…started showing busy instead of the event title. All the dates and times are correct, but everything show busy.
    This is one without the wrapper http://www.fairviewmw.org/calendar.html
    This is one with the wrapper http://www.fairviewmw.org/calendar2.html
    Did Google update something?
    Any help would be appreciated!

    Comment by Troy B at 1:14 am on September 29, 2009

  21. Figured it out. For some reason my calendar switched from Show Details to Show Free/Busy.
    Thanks for making a great calendar better!

    Comment by Troy B at 11:09 pm on September 29, 2009

  22. I have the same files on two different servers…

    http://www.powerplantonline.com/calendartest.html
    http://element26studios.com/calendartest.html

    The first one works, but the second doesn’t seem to work at all. I’ve tried a variety of changes to fix, but I can’t seem to get the second one to work. It’s on a GoDaddy server and I’ve tried the fix on comment #18 but to no avail… Actually the fix on #18 made the first one work, but did nothing on the second…

    Comment by Brian H at 5:15 pm on September 30, 2009

  23. To mdr6273 (#19): I’m unable to reproduce the background color issue you described. I set a background color by going to “Customize the color, size, and other options” in Google’s “Embed This Calendar” tool. You can also replace the HTML color code from Google’s color picker with any color code you like.

    Comment by Chris Dornfeld at 3:50 pm on October 9, 2009

  24. Was working fine for the last two months… them the customer went in and added some dates and now nothing shows up. Standard method works though… check that out at: http://www.motherstavern.com/?location=events

    Any help would be awesome!

    Comment by Shaun Harrington at 7:55 pm on October 13, 2009

  25. Hi Shaun (#24): I’ve just updated the download link above with a new version of the script that will fix the issue you encountered. One of the events on your calendar had a dollar sign in the title (“$2 Happy Hour”) that was tripping up a regular expression in the code. Thanks for the report!

    Comment by Chris Dornfeld at 10:38 pm on October 13, 2009

  26. You my friend, are a genius!

    Comment by Duke at 2:35 pm on October 15, 2009

  27. I use this wrapper script on 2 sites both hosted on Elimu-Maisha.com. They are both though on different subdomains. One is aac.elimu-maisha.com and the other is intapp.elimu-maisha.com. On the aac site everything works perfectly no problems, however on the intapp site it gives me a cut off section of my website in the frame and gives me a Error 404 – Not Found… please check it out intapp.elimu-maisha.com and any assistance would be greatly apprecaited.

    Comment by Samuel Kingsbury at 9:41 pm on October 22, 2009

  28. Hey,
    Thanks so much for the fix… and the point out that I probably had a typo… which I did.. its a great script and I really appreciate you putting your time into it.

    Comment by Samuel Kingsbury at 3:41 pm on October 23, 2009

  29. Hi,

    first off, great little script here, I am grateful there are smarter people out there willing to share their ideas/scripts for the common person to make use. I am having some difficulties with this script cutting off the displayed events after ~a month. We have a calendar with events scheduled well into the future (as much as a couple years), and when I use your script to embed the calendar, for some reason the events aren’t being shown more than ~a month in advance. If I embed straight from google, all of the events show up normally. Is this a result of google updating the calendars, or possibly some sort of timing out on the wrapper script when there are so many events?

    I really appreciate any insight you might have, thank you

    Comment by Matt at 4:26 pm on November 5, 2009

  30. well i wish to heck this worked for me, i was able to display the style sheet from someone else that used your method but for some reason the free server I’m currently on will not seem to run your code, any suggestions would be appreciated.

    Comment by Chris at 10:55 pm on November 5, 2009

  31. my web host has open_basedir set, not disabled.. does that mean there is no work around for me to accomplish this?

    Comment by Chris at 11:29 pm on November 5, 2009

  32. i followed all the instructions on this great tutorial but doesn’t seem to work at all. Any advice?

    http://www.partylifenetwork.com/eventcalendar.html

    Comment by Bernard at 4:07 am on November 6, 2009

  33. moved calendar to http://www.partylifenetwork.com/betacalendar.html

    i am now getting this messsage:
    Warning: main(Services/JSON.php) [function.main]: failed to open stream: No such file or directory in /home/donedeal/public_html/partylifenetwork.com/gcalendar-wrapper.php on line 262

    Fatal error: main() [function.require]: Failed opening required ‘Services/JSON.php’ (include_path=’/usr/lib/php:.:/usr/php4/lib/php:/usr/local/php4/lib/php’) in /home/donedeal/public_html/partylifenetwork.com/gcalendar-wrapper.php on line 262

    Comment by Bernard at 4:30 am on November 6, 2009

  34. To Chris (#31): Having the PHP open_basedir setting enabled on your web server is not normally an issue. It just means that visitors may rarely see a “Moved Temporarily” message with a link they have to click to load the calendar. See my earlier comment #11 for more details.

    To Bernard (#32/33): It sounds like your server is running an old version of PHP, so you’ll need to install the PEAR::Services_JSON library. Here’s how to do that.

    1. Go here:
    http://svn.php.net/viewvc/pear/packages/Services_JSON/trunk/JSON.php?view=log

    2. Click the (download) link next to “Links to HEAD”

    3. Save the file and name it: JSON.php (case sensitive)

    4. On your web server, in the same location as gcalendar-wrapper.php, create a folder called: Services (also case sensitive)

    5. Upload JSON.php into the Services folder

    6. Reload your embedded calendar page

    Comment by Chris Dornfeld at 5:32 pm on November 6, 2009

  35. Thanks very much…everything seems to b working now.

    Comment by Bernard at 7:27 pm on November 6, 2009

  36. Great script, thanks for everything!!!!

    Comment by Joe from Tampa FL at 9:57 pm on November 10, 2009

  37. Awesome! Thanks so much, but why wouldn’t google have this simple functionality built in. It seems so strange. I mean, look what they’ve put you through…

    Comment by Drew at 4:31 am on November 15, 2009

  38. The script worked at the beginning and few reloads on WordPress stopped working. Anybody knows why?

    Comment by Daniel at 8:27 pm on November 22, 2009

  39. Hi,

    Thanks for that script it sounds great.
    Unfortunately, I did the install as it explained
    but nothing is displayed on my page.
    No warnings or something.
    I configure my php.ini properly

    json support enabled
    json version 1.2.1

    allow_url_fopen On
    allow_url_include On

    Can you help me ?

    Thanks

    Comment by Lucas at 7:49 am on November 26, 2009

  40. Mmm, I think I spoke too fast.
    I tried once more and it did work, but I really
    don’t know why.
    Anyway, now I’ve got nice colors in my calendar.

    Thanks.

    Comment by Lucas at 4:06 pm on November 26, 2009

  41. How do you change the full-day event to not be blue?

    Comment by Jane at 8:42 am on November 28, 2009

  42. PURE GENIUS – Thank you SOOOOOOOOOO much

    Comment by Alice the Brit at 9:59 am on December 4, 2009

  43. is there a more extensive list than those 5 colors? the main thing I think a lot of people are gonna want to do is change the white to match the background color of the page.

    does anyone know more class names?

    I’ve been trying to just guess with little success.

    Comment by Jeffrey at 10:51 am on December 6, 2009

  44. Hi Jeffrey, the background color can be customized in Google Calendar itself. Go to “Calendar settings” and pick “Customize the color, size, and other options” under “Embed This Calendar”. Click the background color swatch and choose a new color. If you need to use a color that isn’t part of the built-in palette, just modify the calendar embedding URL that Google gives you to insert your own color code for the “bgcolor” parameter.

    There are undoubtedly other design elements that some people may want to customize as well. To discover the appropriate CSS elements (so that you can insert additional style rules in the script) you may find it useful to use a tool like the Firebug add-on for Firefox.

    Comment by Chris Dornfeld at 12:07 am on December 8, 2009

  45. Thanks so much for this. I did end up using http://www.restylegc.com/ (previously known as MyGoogleCal) because I can control the fonts with the style sheet included. Thanks for the link to that!

    @Chris Dornfeld — the restylegc has full CSS with it, so you can modify the exact CSS elements easily.

    Comment by Angela Bowman at 8:15 pm on December 8, 2009

  46. Dear Unitz Team,
    I’ve been a huge fan of your system. It’s the coolest thing, and I love being able to customize the appearance of the calendar to match the site.

    Our problem is that we had the system working perfectly on our server for months, and then all of a sudden BOOM! It just stopped working.

    We’ve backtracked, and started from scratch- downloaded the latest file, got the latest Google embed code, re-uploaded, etc, but no luck.

    The Google calendar itself works fine on the site, but when we point to the gcalendar-wrapper.php file, it just goes blank. There are no error messages on the page, it just blanks out.

    Any advice?

    Kelli

    Comment by Kelli at 8:35 pm on December 15, 2009

  47. Thanks so much for sharing this script! I’m using it for a client site and it does exactly what I need. Much appreciated.

    Comment by Sarah Lewis at 3:01 pm on December 28, 2009

  48. Great script! Although one thing is driving me crazy… is there no way to remove the title? I’m displaying an agenda and in the initial Google Calendar code ‘showTitle=0′ is set, so it shouldn’t display a title. It works fine before I insert the gcalendar script however once I add it I get the calendar title back… I’d love to loose this title, any help would be appreciated.

    Thanks,

    Alan.

    Comment by Alan at 11:34 pm on January 1, 2010

  49. Hey Alan, the script works just fine with the showTitle=0 parameter in my testing. I’d suggest checking for any possible typos in your URL.

    Comment by Chris Dornfeld at 10:02 pm on January 3, 2010

  50. This is a great script! Love the idea!!! I am having an issue though that I can’t figure out. I’m using Google Apps and the calendar show correctly on my web page ( http://beautifulvictory.com/events.html) However, when I add an event to the calendar, it does not update on my site. Please help me figure this out as I really would love to use this. Thanks ahead of time!!!

    Comment by Brandon P. at 2:06 pm on January 25, 2010

  51. THANK YOU!!! My church website has a brown color scheme, and the google calendar on the home page looked like it was just plopped there and did not fit in. Now it matches the color scheme perfectly

    Comment by Jay J at 9:25 pm on January 31, 2010

  52. l like your script and it works fine, but when i use it my calendar changes my home language to english. How can I get my language back?

    Comment by Kiki at 11:05 pm on February 4, 2010

  53. To Kiki (#52): See my advice above in comment #5. To force the calendar to Hungarian, for example, make sure the parameter &hl=hr appears in your calendar URL.

    Comment by Chris Dornfeld at 11:26 pm on February 4, 2010

  54. Now all works perfectly, thank you very much for this script and help!Stay well!

    Comment by Kiki at 12:27 am on February 6, 2010

  55. this is outstanding work! thank you..

    Comment by muzo178 at 5:15 am on February 12, 2010

  56. HI Chris,
    Thanks for looks like a great script!
    I have done all the steps you recommend, but I am getting the google log in screen instead of the calendar.
    Our old calendar was at http://www.shastaabbey.org/new/calendar.html
    The new one with your revised code is at http://www.shastaabbey.org/new/calendarTest.html

    Do you see what the problem might be. I would be VERY grateful for any help.
    Thanks,
    Mary Helen

    Comment by Mary Helen Fein at 1:39 pm on February 21, 2010

  57. Thanks so much Chris for sending an email and solving this problem. I signed out of Google, then deleted my temporary files. Then when I reopened the calendar it was right! Plus great color changes.
    Mary Helen

    Comment by Mary Helen Fein at 12:08 pm on February 22, 2010

  58. Hi

    Thanks so much for this code.

    I’m having a problem I wonder if anyone can help with.

    This wrapper works great on a page and in the front page’s sidebar.
    BUT it returns a 404 error when show in the sidebar of individual posts.

    (e.g http://www.phoenixkarate.info/news/summer-camps-are-coming Left sidebar, scroll down)

    Any idea what I’ve done wrong?

    Thanks!
    Julie

    Comment by Julie at 8:51 am on February 26, 2010

  59. Can this be used with a Joomla site?

    Comment by September Coll at 2:11 am on February 28, 2010

  60. This is soooo very awesome! How can I change the color behind an event? I changed it on the actual google calendar and it didn’t come across to the embedded calendar :( http://www.trinityalternative.com/events/calendar.html

    Thanks!

    Comment by Melanie at 8:01 pm on March 7, 2010

  61. Note: For use when hosting with Hostmonster.com

    Received error similar to: (Reference #17)

    Resolved problem by re-naming “gcalendar-wrapper.php” to “gcalendar-wrapper.php5″ on server (Reference #18)

    P.S. – Don’t forget to change your calendar embedding code to reflect this change :)

    Comment by Michael Zabel at 11:14 pm on March 14, 2010

  62. Thank you so much for this script. Much appreciated.

    I’ve been working on this all day, and can’t seem to get it working (http://www.gspministries.net/calendar2.html). I can’t see the calendar at all. I loaded the JSON.php file as recommended, saved the calendar as public, and tried to follow the directions exactly. Please help if you can. – Thanks Crystal

    Comment by Crystal at 11:09 pm on March 16, 2010

  63. This works great, thanks so much. Just wondering, in case I missed it, is there a way to make the text within the calendar days “bold” or change the color? Wanted to change the color of the actual event listing (the type).

    Comment by e4art at 11:46 pm on April 10, 2010

  64. This works so great, thanks for putting it up! :)

    Comment by Cynthia at 5:58 pm on April 15, 2010

  65. This is awesome, thanks!!

    Comment by Ray at 4:10 am on May 1, 2010

  66. Dear Chris,

    I love this! Thank you so much!

    Comment by Rico at 6:04 pm on May 4, 2010

  67. Thanks a lot for this script, exactely what I wanted!
    Is there any way to customise the “tabs”: week, month, planning?
    They stayed blue :(
    Check it here: http://www.letolet.be/professional/reservations.html
    Thanks in advance.

    Comment by ChrisR at 8:18 am on May 7, 2010

  68. Hi ChrisR (#67), Google recently made some modifications on their end that changed the tab styles. I have just posted a new copy of the script (version 2010-05-16) that incorporates these changes. The tabs should appear in your custom colors with this latest version.

    Comment by Chris Dornfeld at 10:55 pm on May 16, 2010

  69. Thanks so much! Great fix! The comments were super helpful as well.

    Comment by Shawn at 5:16 pm on June 18, 2010

  70. [...] Easy Color Customization for Embedded Google Calendars | U-notez – July 7th %(postalicious-tags)( tags: calendar google css color custom php code embed )% [...]

    Pingback by Delicious Bookmarks for July 7th from 21:05 to 21:56 « Lâmôlabs at 10:03 pm on July 7, 2010

  71. Thank you so much for this wrapper. I’ve been wanting something just like this to embed Google calendar into our sidebar and match the color scheme. It works great (though when I first uploaded the script, I got a copy of our website image in there…glad I read the comments because I realized I needed to log out of Google first).

    However, one thing I noticed is that the wrapper doesn’t seem to affect the upper part of the calender in agenda mode. That still is only affected by Google’s embed code. And though I can put a customized color in there for the background, I still can’t change the color of the text. And since we have a dark color scheme, that means black on dark color (bleah!).

    Any chance that this part of the calendar in Agenda mode can be affected in a future version of the script?

    Comment by Omaha Sternberg at 9:59 pm on July 17, 2010

  72. Hi Omaha (#71), thanks for the heads-up on that. It seems Google has tweaked the calendar code recently and I’ll need to update the script to accommodate. Please check back for a new version in the next few days.

    Comment by Chris Dornfeld at 12:30 am on July 21, 2010

  73. Just a follow-up on #71. The date text you see at the top in agenda mode (for example, “Friday, August 6″) appears on top of a background color you chose in Google’s embedding tool. Because that color choice happens independently of this script, you will need to add a CSS rule to set a specific color for the date text. Add the following text inside gcalendar-wrapper.php within the section titled “Prepare stylesheet customizations”:

    div.date-top { color: #FF0000 !important; }

    Change the color code to the color of your choice. You can find color codes at html-color-codes.info.

    Comment by Chris Dornfeld at 3:58 pm on August 6, 2010

  74. Thanks for putting this together, I’ve been looking for something that does this for a while. I’m having trouble getting it working, and hope you can help. I’ve checked the php info and everything looks good, but when I go to my page, I get the “moved temporarily – the document has moved here” message. I’m hosting on godaddy, checked the php requirements and everything looks good. I tried renaming the script to end with the php5 extension, but that didn’t make a difference. My cURL version is 7.10.6. Is that causing this not to work? Thanks!

    Comment by Scott Davis at 2:35 am on October 10, 2010

  75. Hi Scott (#74), correct, it sounds like the version of cURL on your GoDaddy server is too old. The script includes a workaround for the “Moved Temporarily” issue, but you need libcurl library version 7.15.2 or higher to take advantage. Please see comment #11 above for more info.

    Comment by Chris Dornfeld at 1:08 pm on October 10, 2010

  76. Thanks for creating the gcalendar-wrapper.php script.

    I have been working on a WordPress plugin that allows for color customization through the WordPress admin. I have it working pretty well on my local machine. I decided to test it on one my hosted sites and I am having the same “Move Temporarily” issue as in comment #11. I looked at my PHP settings and have PHP 5.2.6, Curl 7.15.5, safe_mode local value is “Off” but the open_basedir does have a value. My local machine does not have a value set for open_basedir so this is apparently the issue with the hosted version.

    The intermittent “Moved Temporarily” is kind of a big issue. I realize this is a result of the hosting environment but it would be nice if there was a way to catch this error and retry the request. Do you have any ideas on how this might work? Is there a way to check the status within, say, the get_headers function, in the gcalendar-wrapper.php script before actually printing the calendar? I don’t want to get_headers() directly on the $calUrl b/c this it may return OK while the “print $calCustomized;” line may return the 302 error. Is there a place around the “Retrieve calendar embedding code” comment that this test can be run?

    Thanks again for sharing this with us all.

    Comment by phattymatty at 12:32 pm on October 13, 2010

  77. I’ve worked out a solution that retries loading the calendar as long as the 302 Moved Temporarily error response is returned. It also limits the number of attempts to 10 tries in case something else may be going on (but this can be easily changed). I can send you the modifications I made to your script if interested. If so, let me know the best way to send to you.

    Thanks

    Comment by phattymatty at 2:38 pm on October 13, 2010

  78. Great! Took me less than 10 minutes to do what I wanted :)

    Comment by skuall at 6:55 am on October 19, 2010

  79. Everything works 75% of the time but about 1 in 4 times there area where the calendar should be is totally blank. A refresh usually but not always fixes it — sometimes 2 or 3 refreshes are necessary. Any Suggestions???
    Thanks,
    Mike
    Tacoma, WA

    Comment by Mike at 10:48 pm on October 25, 2010

  80. [...] Chris Dornfeld for the wonderful gcalendar-wrapper.php script we use as the core of this plugin. [...]

    Pingback by Stout Google Calendar at 6:16 pm on October 27, 2010

  81. @ phattymatty

    Hi!

    I am very intrested in your soulutin (#77) can you post the modifications?

    Thanks!!!

    btw Great Script!!!

    Comment by MiMa at 5:43 am on November 1, 2010

  82. @MiMa and @Mike,

    Chris has told me that he will probably be adding the update to his script soon (I’m sure he wants to review and test what I’ve done.) In the meantime you can take a look at the fix here. You will need to replace everything in the “Retrieve calendar embedding code” section (lines 198-232 in the current gcalendar-wrapper.php script).

    http://gist.github.com/659887

    Comment by phattymatty at 12:34 pm on November 2, 2010

  83. wow, a gift from above. i love it. but—i can’t get anything to show up under “saved” calendars.

    i get the message:
    “Calendar successfully created: Events.”

    after creating and tweaking—everything under saved is blank.

    ideas?

    thanks for the great plugin.

    Comment by ty at 12:58 pm on November 4, 2010

  84. Didn’t work. Going back to puke-google-blue

    Comment by Peter Green at 9:19 pm on November 9, 2010

  85. My calendar stopped working on some computer-browser configurations in the last few days. Did google change something that affected this script? Bit of an emergency here because it’s for a small college. Anyone else experiencing this?

    Comment by Phil Nauta at 2:52 pm on November 10, 2010

  86. This is a great plugin, however I am having issues with it working in Chrome. Is there anything I can do to make it appear in Chrome? It shows up in IE, and Firefox, but not Chrome.

    Any tips are greatly appreciated, thanks. And again, thanks for a great plugin!

    Comment by typedink at 3:26 pm on November 10, 2010

  87. It looks like Google has made some changes to Google Calendar that will require updates to the wrapper script. I will look into it ASAP, though it will probably be this weekend (13th or 14th November) before I have an opportunity. In the meantime, calendars will appear in the standard Google blue. Bummer!

    Comment by Chris Dornfeld at 12:19 am on November 11, 2010

  88. I had the same problem of unsaved Google calendar. Turns out the problem is Google’s change on the calendar. I’m Looking forward for your script updates then, Thank you!

    Comment by fathoni at 6:21 am on November 14, 2010

  89. I have just posted a new version of the script. It now requires PHP OpenSSL support in response to a change on Google’s side. As a happy side-effect, it seems that this fix resolves the “Moved Temporarily” issue some people were seeing – so for the time being, I haven’t incorporated the alternate fix from phattymatty (#82 above).

    I would appreciate hearing whether this updated version fixes the redirect issue for others.

    Comment by Chris Dornfeld at 2:25 am on November 15, 2010

  90. Hi Chris,

    I gave it a run and it looks like your fix took care of the redirect/”Moved Temporarily” issue. I’ve incorporated it into version 1.0.3 of the Stout Google Calendar WordPress plugin and removed my temporary workaround.

    Awesome work – thanks!

    Comment by phattymatty at 11:20 pm on November 15, 2010

  91. This fix is so great. Thank you so much. The blue Google calendar was out of place on a red, black, and white, themed site. Now we have embedded calendars that are so much more a part of the integrated look. Thanks!

    Comment by Mark at 8:16 pm on November 23, 2010

  92. This is a great idea; however I am doing something wrong and can’t for the life of me figure out what it is. I keep seeing the error message in the embedded Calendar that reads “Invalid calendar id:”. It must be in my code. Can you help? Thanks in advance and for this great code.

    Comment by Greg at 11:22 am on December 1, 2010

  93. Sorry, my code was incorrect in that post. Re-posting to update the code…

    Comment by Greg at 11:27 am on December 1, 2010

  94. I love this script but don’t know enough about JSON libraries and cURL extension OR allow_url_fopen to use it. It appears that I have to install these in order to utilize the capbalities of this script. I have looked through the documentation on thier websites but don’t know enough about php, etc. to get them installed on the server that hosts the website I am working on.

    Any help would be much appreciated.

    Thanks,
    Bill

    Comment by Bill at 12:40 pm on December 13, 2010

  95. This is not even close to an “easy” solution for people that aren’t programmers. Everything is nicelt laid out, to send me to pages where I have no idea what I’m looking at. Nor do I find editing PHP ini files fun. I know some do. I CAN edit a PHP file and understand how to change the colors. Everything else is just too much.

    Is there a way you can zip up everything one would need and have that for download? Or possibly make a html wizard? I don’t know. Anything but this method.

    Again, for those of us that don’t know Klingon, and want a nice Google calendar to match our client’s website, something else would sure be helpful.

    Comment by gorillamilk at 10:42 am on December 15, 2010

  96. Hi Bill/gorillamilk, sorry to hear that setup isn’t going smoothly for you. Did you try to use the script? For most users, there’s no need for additional downloads or changes to PHP settings — just add your colors to the script, upload it, update your calendar embed code and you’re up and running.

    The technical requirements are listed because some web hosts use outdated or non-standard PHP environments. If you’re unfortunate enough to be in that position, you’ll know what to tell your web host or web developer.

    If you use WordPress, you may find it easier to use the WordPress plug-in mentioned by “phattymatty” above (#90). You can find it by clicking on my name.

    Comment by Chris Dornfeld at 1:05 am on December 16, 2010

  97. I have tried hard to get this to work, but I am getting”Events from one or more calendars could not be shown here because you do not have the permission to view them.” errors.

    I don’t want to have to make my personal calendars publicly available and indexed by Google (which seems to be the only option I can find). Is there any way to Auth to Google and pass a token with the curl? I have tried a million different ways, and I can get a token, but nothing seems to change the response.

    Any ideas?

    Comment by dbw at 4:35 am on December 16, 2010

  98. Does anyone have an idea on how to make this work with multiple calendars? Every calendar has a different color, and would like to define one custom color for each one of those.

    Comment by Ioustinos at 10:13 am on January 16, 2011

  99. Hi Ioustinos, I think your question is more about Google Calendar in general – this script just changes the colors of your existing calendar, however you have it configured. But what you’re describing sounds like it’s part of Google Calendar’s capabilities and you might find the instructions on this page helpful:

    http://www.google.com/support/calendar/bin/answer.py?hl=en&answer=41207

    Comment by Chris Dornfeld at 9:46 pm on January 16, 2011

  100. thanks for this gcal control.

    today i had a scare when i found a white space instead of my cal this morning. used the current script you have on the site & all is well again.

    when searching for gcal customization alternatives this afternoon i found some info that may also be helpful – for developers. http://hansdebano.net/google/feedapi/calendarfeeds.html

    Comment by DoubleKnot at 8:22 pm on January 17, 2011

  101. Bummer. I tried installing this without checking the server parameters, and when I accessed my page, I was prompted to download a file instead of having my calendar display.

    Comment by disappointed at 12:15 pm on January 21, 2011

  102. I used the latest version of the script: (version 2010-11-15) and unfortunately I just get a blank box in the space where there should be a calendar.

    Reviewing the comments, I’ve seen 2-3 other people with a similar problem but no clear resolution other than “get the latest script” – but I think I have that.

    Comment by Jeremy Corbally-Hammond at 9:01 pm on January 26, 2011

  103. Hi,

    I have downloaded the gcalendar-wrapper.php, but I’m not sure where should I upload this to my webserver in order to link it with my code that google gave me?! Can you please help?!

    Thanks.

    Comment by Adam at 3:28 pm on January 27, 2011

  104. Hi Chris,
    Thank you so much for this script!
    Is there any way to change the color of the text of the word ‘Print’ at the top of the embedded calendar (next to the print icon)? And is there a way to change the color of the Calendar title (By default it is black)?
    I read your response #73 about changing the date color. How do I do this for Print and (Title)?

    Thanks

    Comment by DaveBrandt at 12:07 pm on February 4, 2011

  105. Isn’t this against Google’s ToS?

    Comment by Omni at 3:49 am on February 8, 2011

  106. I used the latest version of the script: (version 1.1.1) and unfortunately I just get a blank box in the space where there should be a calendar.
    Webpage error details is given below. Calendar is from time to time so is not stable.

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET4.0C; .NET4.0E; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
    Timestamp: Thu, 10 Feb 2011 05:27:19 UTC

    Message: ‘document.getElementById(…)’ is null or not an object
    Line: 167
    Char: 5
    Code: 0
    URI: http://unianordycka.com/

    Message: Object doesn’t support this property or method
    Line: 10
    Char: 21
    Code: 0
    URI: http://unianordycka.com/unianordycka/wp-content/plugins/stout-google-calendar/gcalendar-wrapper.php?hl=pl&amp;…

    Message: Expected identifier, string or number
    Line: 381
    Char: 2
    Code: 0
    URI: http://unianordycka.com/

    Best regards
    Jakub

    Comment by Jakub at 12:30 am on February 10, 2011

  107. Hi i just change the language into default and caledar has been shown. So polish language didn’t working. I have still some error on page, but i am not sure what is the problem, maybe it is some else.

    Comment by Jakub at 12:52 am on February 10, 2011

  108. Hi Jakub, it looks like you’re using the Stout Google Calendar WordPress plug-in, which uses this script on the back-end. The WP plug-in was built by another developer. You would first need to test your calendar with the standalone script (downloadable from this page) and see if you encounter the same error. If not, it might be an issue specific to the WP plug-in and you would have to report it to the plug-in’s author, in that case.

    Comment by Chris Dornfeld at 10:47 pm on February 10, 2011

  109. hi chris

    this script is ace but as soon as i swap the url to direct to the gcalendar php file on my server it only shows busy in the title of each date rather than showing full meeting/event details on my website. any ideas?

    thanks.

    Comment by tom hand baked at 1:34 pm on February 19, 2011

  110. http://www.hawaiianbrians.com/contact_us.asp

    Hi Chris, I searched the web for hours and came across this gem. Got it to work. Though I would like to know if you have added other color changes that could be done. Such as (click on my link above)…I would like to change the white area that displays the event to a darker color with the text to contrast. Do you have a reference to that?

    Please advise.

    Thank you,

    Irwin

    Comment by Irwin at 10:55 am on February 20, 2011

  111. I receive the following error:

    Fatal error: main() [function.require]: Failed opening required ‘Services/JSON.php’ (include_path=’.:/usr/lib/php:/usr/local/lib/php’) in /home/lambdaen/public_html/HVMLA/gcalendar-wrapper.php on line 277

    Comment by Edward at 2:52 pm on March 8, 2011

  112. The problem was on my host. This was their reply and the solution:

    All of our shared and reseller servers run both PHP4 and PHP5. To utilize PHP5 as the default PHP parser, please add the following line to the .htaccess file in your public_html directory. This can be done in the CPanel File Manager or by FTP:

    AddType application/x-httpd-php5 .php

    Comment by Edward at 4:52 pm on March 8, 2011

  113. Thank you for this script, I started doing the { scrap / filter } process myself before searching, then found your script. Thankfully it saved me a lot of time! One questions though, I use the custom ‘title=New%20title’ attribute in order to replace the email address associated with the calendar to be a text title. How do I change this to be reflected on the re-colored page?

    Comment by Octavian at 4:38 pm on March 20, 2011

  114. Excellent article, I have been trying to find how to further edit Google embed code all morning. One question, if anyone could help me: Would I be able to edit the colrs of the “Sample Calendar” (appearing on the example calendars above) text? I have a calendar where that title text has the names of three cities which the 3 calendars display the events of in 3 colors. People are complaining that there is no color key. I do know that you can see this by clicking the little down arrow by “week, month, agenda”, but many people do not realize that can be done. Can you help?

    hit me up at doctor.light@gmail.com

    Comment by drL at 1:57 pm on March 31, 2011

  115. First off, thanks for the script. Very useful.

    I have it installed on a site which is currently going to through review by a security firm so that the site can do online credit card authorizations. The gcalendar-wrapper.php page is getting flagged by their automated scan because navigating to it will produce a sign in form that is not SSL encrypted. And even though the form submits to an SSL URL that page will not pass their security scan.

    So my question is: What is the easiest way to prevent the sign in form from rendering in the browser so that the site can pass their security screening? Is the sign in form being passed along as part of the curl process and can it just be detected and removed? Thanks!

    Comment by Martin at 11:46 am on April 13, 2011

  116. Thanks for the email Chris. That did the trick.

    I ended up just checking for the existence of a value for the “src” key in the querystring and only print the output if it exists.

    if (array_key_exists(“src”, $_GET)) {
    print $calCustomized;
    }

    Comment by Martin at 12:15 am on April 14, 2011

  117. Great piece of scripting, i’ve been looking for ages at how to change the calendar colours so its more themed with my web site.

    Has anyone manged to change the colour of the TITLE, PRINT and drop down MONTH text.

    At the moment its default to black which is too dark for my site and cannot be seen.

    Any help greatly appriciated.

    Many thanks,

    Steve

    Comment by Steven Tisseyre at 1:04 pm on May 7, 2011

  118. This script was extremely helpful, thanks a lot. I’m not quite an expert with Google’s gadgets and all, so it took me a little bit to figure out that I first had to change my calendar’s sharing setting to public before the script took effect. Maybe putting this as a step in the instructions would help noobs like me. Keep up the good work!

    Comment by Jared Roder at 9:40 pm on May 30, 2011

  119. [...] Color customization for embedded Google Calendars:  http://www.unitz.com/u-notez/2009/04/color-customization-for-embedded-google-calendars/ [...]

    Pingback by Google Dev Links | Panton Interactive Blogs at 8:18 pm on June 14, 2011

  120. I get the following error.

    Parse error: syntax error, unexpected T_VARIABLE in /home/a6883567/public_html/gcalendar-wrapper.php on line 1

    We are working on a site redesign so this page isn’t “live” yet.

    Comment by Kimberly Wilburn at 10:45 am on June 17, 2011

  121. Alright, I fixed the line 1 error. Now I get:

    Fatal error: Can’t use https protocol with cURL to retrieve Google Calendar in /home/a6883567/public_html/gcalendar-wrapper.php on line 214

    I’m going to try restylegc and see if I have more luck.

    Comment by Kimberly Wilburn at 10:09 am on June 18, 2011

  122. [...] I found this site: Easy Color Customization for Embedded Google Calendars. Even though it wasn’t exactly what I wanted to do, I knew it must have something to do with [...]

    Pingback by Electronsmith.com » Blog Archive » Applying CSS to Google Calendar Embedded in an iframe at 12:28 pm on July 23, 2011

  123. Excellent! Works perfectly first go. Am very greatful!

    Comment by John at 3:53 pm on August 14, 2011

  124. Awesome, it still works 2 years after this was posted. I could find no other solutions. I did have to add the http://ruidoso411.com/calendar to the code so it pointed to the right directory but it works nicely! Evidently Google calendar has not made changes so that this script would be obsolete. Still works.

    Comment by JP at 11:10 am on September 18, 2011

  125. Awesome! However, it didn’t work well in IE9 and IE10, events start from October onwards didn’t show up. Any ideas? IE7 and IE8 no such problem, all events displayed.

    Comment by Simon at 5:01 am on September 22, 2011

  126. Hi Simon, I was able to reproduce the issue you’re describing. In IE9/IE10, sometimes only about 6 weeks of future events appear. In other browsers and in IE8 and earlier, future events aren’t limited.

    It turns out that Google is forcing IE7 rendering mode inside the calendar frame. Starting with IE9, Microsoft doesn’t allow a parent page to have a different IE rendering mode than a child page inside an IFRAME.

    If you need to display future events to IE9/IE10 users, the fix is to add a META tag to the parent page (the page on your own web site where you are showing the calendar) to force the entire page, including its embedded calendar, into IE8 rendering mode. The tag you want to add is shown on this page (see post #2) along with a technical discussion of the issue:

    http://www.sitepoint.com/forums/showthread.php?743000-ie9-iframes-doctypes-you#2

    The long-term fix for this (IMO) should be a change on Google’s side so that the calendar frame doesn’t call for IE7 rendering mode in IE9/IE10. When and if Google makes that change, the META tag will no longer be required.

    Comment by Chris Dornfeld at 1:40 am on September 26, 2011

  127. Hi,

    I have some blue navigation arrows and a blue dropdown arrow.
    How can i get rid of those?

    Where do you check the updated styleshet from google?

    Comment by John K at 6:45 pm on October 11, 2011

  128. Hi Chris,
    I am not confident that I can actually go through these steps and makes the necessary changes, so I’ll ask this first. What is the linit of the functionality for changes.
    We would like to have control of the colours displayed for an event. At the moment one can only choose one colour and all events/appointments etc will be that colour. We would like to have (at least) 3 different colours so we can diaplay availibity of service in red/orange/green traffic light style?
    Is this possible?

    Comment by Manus at 6:10 am on October 13, 2011

  129. In response to Manus, I found a workaround for getting different event colors in embedded calendars. Just create different calendars for each color, and set your events to no color. Set your calendar colors either through the calendar settings, or when you create the embed code. Select all the calendars you want to display, and they will all show as one calendar, with events in their respective calendar’s color. Here’s my example on the site I’m working on.

    http://clubmenagerie.com/pages/events_google_test.html

    Now, my question, to anyone who can answer, I can’t for the life of me figure out how to get the white background for the calendar cells to change. I set the background color when I created my embed script, and all that appears to affect is the outer border area, behind the tabs and navigation. Is there a way to change the white behind the days to another color?

    Thank you so much, and thank you Chris for posting this sweet script!

    Comment by Russell at 12:17 pm on October 15, 2011

  130. In response to Russell, In your Google Calendar settings, Google Calendar Labs allows you to add the option of a background image behind the entire calendar.

    Comment by Norman at 3:49 pm on November 2, 2011

  131. This works brilliantly. Something I discovered though is that you can use absolute paths (src=”http://www.mysite.com/gcalendar-wrapper.php)instead of relative (gcalendar-wrapper.php)and can use multiple styles for multiple calendars by duplicating and renaming the php files eg. wrapper1.php etc Thanks

    Comment by Gerhard at 9:03 am on November 22, 2011

  132. Hi, for some reason I am getting the google sign in box on my webpage and not the calendar. Not sure what I am doing wrong…I read the comments above and signed in and then out again and deleted my cookies, but still no luck. Any help would be appreciated. If you email me I can send you my files. Thanks!

    Comment by susan at 1:14 am on December 7, 2011

  133. Hi,

    I’ve encountered the same issue with the calendar rendering in IE9. I’ve tried to add the meta tag in of the parent page with no success. I notice that the compatibility mode option goes away; however, my events are still not displayed.

    Any suggestions?

    Comment by Crystal at 10:21 am on January 10, 2012

  134. I followed the instructions and instead of displaying the calendar it displays your php file. I looked through about 40 of the comments to see if anyone else had that problem, but didn’t see anyone. I tried a few of the options you gave others like the php5 extension for godaddy and the JSON file… but none of it works.

    Comment by Matt at 12:41 am on January 15, 2012

  135. Thank you, this worked for me!

    Comment by Sadie at 8:55 pm on January 23, 2012

  136. I used your script to allow events titles to wrap. I found a lot of questions on this before I found your script. Here is the added CSS code to wrap event titles. Awesome script. Thanks so much.

    /* fix word wrap */
    .agenda .event-title {
    white-space: normal;
    }
    .rb-n{
    white-space: normal;
    }
    .te {
    white-space:normal;
    }

    Comment by Mark at 2:18 pm on January 30, 2012

  137. Thank you for the script! The colors are great. Only problem for me is no events are showing up. They did before I pointed to the script. I cannot get you a link to the site yet as it isn’t live. I am using 5.12 Safari and the calendar I have embedded is not the default calendar. Can you help

    Comment by Sherri at 9:40 am on February 4, 2012

  138. Mark’s “fix word wrap” above works great! HINT: Append his CSS to the php section labeled “Prepare stylesheet customizations” (before the “EOT”). I agree: AWESOME opening into the Google Calendar CSS! THANKS!

    I also added a hanging indent to the daily calendar entries (in month mode), by replacing Mark’s ‘.te’ code with this:
    .te {
    white-space:normal;
    padding-left: 10px;
    }
    .te:first-letter {
    margin-left: -10px;
    }

    Comment by John C at 12:45 pm on February 14, 2012

  139. Hello! Love the plugin, but discovered a problem. On internet explorer (IE) it will only show events out for about 1 month, but in Firefox & Chrome it shows events all the way out. WE need it to show events all the way out in IE. Any ideas? Suggestions? Thank you!

    Comment by Aaron Pyne at 5:18 pm on February 23, 2012

  140. I have the same problem as Aaron but it is only IE9 that seems to have the issue.

    Comment by Mark at 3:31 pm on February 28, 2012

  141. And now I see you have a solution for it under comment 126

    Solution: Add in the head section of the page displaying the calendar,

    Comment by Mark at 4:04 pm on February 28, 2012

  142. Your script enlarges the text sizes from the defaults (or changes fonts or something else — not exactly sure what is going on). Is there a way to change the font size? I’ve tried adding style codes to the URL, to your script, to my Style1.css file and nothing seems to affect the big fonts of the calendar.

    Please help!!

    Comment by Ted at 12:22 pm on March 7, 2012

  143. I use this script with a few of my clients. Unfortunately, I think there’s a bug while using IE9 (God bless MS for this browser – NOT).

    If you look at the following page : http://www.btswebdev.com/calendartest.html – when looking into the month of April, it doesn’t show past April 7th when using the php wrapper.

    Any ideas?

    Comment by Chris at 4:23 pm on March 28, 2012

  144. Just FYI – Forgot to add – I already tried to add the meta fix. Didn’t work for me.

    Comment by Chris at 5:08 pm on March 28, 2012

  145. PERFECT! THANK YOU SO MUCH!!! =D =D =D

    Comment by Perfect! at 10:39 pm on April 9, 2012

  146. Thanks for the wrapper! Great work!

    Comment by Juan at 5:06 am on April 18, 2012

  147. Tried very hard to get this to work tweaking it here and there when it didn’t. The only results I can get are displaying a google login but not a calendar.

    Comment by HelBan at 12:28 pm on April 18, 2012

  148. Thank you so much! This was super quick and easy to use!

    Comment by Dayna at 10:25 pm on April 25, 2012

  149. Hi,

    I’m having trouble getting the styles to work on my calendar. In my WordPress site, I uploaded gcalender-wrapper.php to the themes folder that I’m using. I replaced https://www.google.com/calendar/embed? with gcalendar-wrapper.php?

    but instead of showing the calendar, it is showing the homepage in that window.

    Is there something wrong with where I put that file in the wordpress structure?

    Thanks for your help!

    Comment by IluvWP at 10:59 pm on May 1, 2012

  150. I know this is quite old now, I’m surprised some people are getting it to work still. But I’m also getting a google login instead of the calendar.
    I can’t believe google still puts that ugly blue background there, just leave it white and no padding. Gee.

    Comment by Gina at 5:39 pm on May 3, 2012

  151. The asp.net version works great! But i got one question. Is it possible to show appointments before 7 days of the actual date?

    Thanks in advance!

    Comment by _T__Z_ at 9:01 am on May 4, 2012

  152. This wrapper stopped working for me today. I’m unclear if Google changed something on their end, or if my hosting provider (Dreamhost.com) changed something on my account that broke it.

    Comment by Bill Glick at 11:59 pm on May 9, 2012

  153. This is great! Thanks
    For anyone who is interested, I was looking to change the background colour and add a background image to the whole calendar – I found the style sheet here:
    https://www.google.com/calendar/b7b9f9ef7f08f23a81f1a6109af58a87embedcompiled_fastui.css
    … and then after a lot of trial and error, it turned out that this was the particular class that I needed to edit:
    .mv-event-container
    … which is towards the bottom of the style sheet. I just grabbed that and stuck it in to my gcalendar-wrapper.php file and could easily change the colour – .mv-event-container{background:#FF0000}
    or add a background image – .mv-event-container{background-image: url(http://address.of.my.image.jpg)}

    Comment by Richard at 2:42 am on May 14, 2012

  154. Yes, this just broke for us too. I think Google changed something on their end. Any ideas?

    Comment by Ken at 2:14 pm on June 7, 2012

  155. I embedded the code into my aspx project successfully and everything works when my calendar is set to show only busy or available. When I set my calendar to show all details I get a log in page. I already tried logging out and emptying my cache, but it still shows the log in page.

    Any help would be appreciated!

    Thanks

    P.S. using the aspx version

    Comment by Jacob at 9:47 pm on July 11, 2012

  156. Brilliant work and thanks for sharing your code. Now…., if we could only get rid of the horrible white background.

    Comment by BP at 9:56 am on July 14, 2012

  157. Great stuff! I had to find a new calendar when our previous feed was closed down. Using Google calendar now but really want to get it to fit in with the look and feel of the site. I’ll take a look at this!

    Comment by Phil at 6:00 am on August 1, 2012

  158. [...] 海外のブログ記事「Easy Color Customization for Embedded Google Calendars」にて、gcalendar- wrapper.phpなるファイルをダウンロードし、色情報を修正済みのgcalendar-wrapper.phpファイルをアップロード。さらに、Googleカレンダーを組み込んでいるhtmlの記述を一部修正するだけというお手軽さ。ただし、IE9で閲覧すると、カレンダーに記入してるはずの先の予定がまっさらな状態になってしまうとのこと。が、それも解決策を伝授していただいてます。本当にありがたいです!ちなみに、表示期間変更の「右矢印」「左矢印」も変更できるようですが、ひとまずカレンダーの枠色が変更できれば満足ですね。 [...]

    Pingback by Gotta needs » Blog Archive » Googleカレンダーの色を変えよう at 1:05 am on September 25, 2012

  159. Hi, I embedded google Calendar to my wordpress.com page, trying to make an image website for a house i rent out. I want to use the calendar to show rates and availabilities, and would like the prices to show up in different colors. The script you shared is great, but seems to only change the calendar style color, am i correct? how can i get the prices (in this case event titles) to show up in different colors?

    Thank you so much!

    Comment by Joane at 2:47 pm on October 18, 2012

  160. Hi, my site is implemented through github. When I use gcalendar-wrapper.php as instructed and navegate to will-landau.com/calendar.html, I get a pop-up that says, “For security reasons, framing is not allowed.” Then, I am redirected to a 404 page. Right now, though, my website has src=”https://www.google.com/calendar/embed?… since I know it works.

    Comment by Will at 10:50 pm on October 24, 2012

  161. This is awesome! Eactly what I was looking for and works perfectly in a WordPress Multi-Site install. Just put it in the themes folder and add the leading path to like “wp-content/themes/themename/gcalendar-wrapper.php?src=”.

    Comment by Karissa Skirmont at 12:26 am on October 26, 2012

  162. hey there and thank you for your info ?I have certainly picked up anything new from right here. I did however expertise some technical issues using this site, as I experienced to reload the website a lot of times previous to I could get it to load correctly. I had been wondering if your hosting is OK? Not that I’m complaining, but slow loading instances times will often affect your placement in google and could damage your quality score if advertising and marketing with Adwords. Anyway I抦 adding this RSS to my email and could look out for much more of your respective interesting content. Ensure that you update this again very soon..

    Comment by Mohammad Ignacio at 6:34 am on November 12, 2012

  163. Hamid Khellafi available on escortguys.ch

    Comment by Hamid Khellafi at 6:29 pm on December 21, 2012

  164. Hi there! I’m at work surfing around your blog from my new iphone 4! Just wanted to say I love reading through your blog and look forward to all your posts! Carry on the superb work!

    Comment by Debloquer Blackberry Torch at 6:48 am on January 2, 2013

  165. Great resource. Thanks a bunch. Just one question, is there a way to change the background color for each event in the agenda view mode? Check out what I mean on one of my website projects http://www.teenchallengemb.org. I want to change it from white to a shade of grey or something. Thanks again!

    Comment by Geno at 1:38 pm on February 10, 2013

  166. Hi folks, does anyone have any thoughts on how to get this to work on web builder/hosts like wix.com who don’t allow php file hosting? I’ve tried uploading the php elsewhere (FTP, weebly site) and pointing the calendar html to the php at those locations but it doesn’t work. Any ideas would be appreciated.

    Comment by Steven at 7:09 pm on March 7, 2013

  167. Thanks for your plugin i have got it working but can not get custom colors for the events?
    whenever i edit them with web safe hex code it just goes blue?
    example “color=%23B1440A&”
    I want to change the hex code B1440A to something else but when i do it just shows all events as the default blue?

    what am I doing wrong

    Comment by MG at 11:44 am on March 15, 2013

  168. Thanks for this, excellent tool. However, I’m having the same problem as #4 with the language changing to German. Could you make it really simple how I change it back to English please, I’m very weak with editing code and really appreciated your description of how it looks before and after in the initial instructions. I obviously want to put it back into English.

    Here’s the page it’s on: http://www.analoguesound.org/calendar

    Comment by Paul BTW at 3:05 pm on June 12, 2013

  169. ahh, no worries, I’ve found it. For anyone else with this problem this is the before and after if it changes language:

    before:
    gcalendar-wrapper.php?title=Analogue%20Sound%20Events&showNav=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&height=600&wkst=1&bgcolor=%23FFFFFF&src=analoguesoundcollective%40gmail.com&color=%23875509&ctz=Europe%2FLondon” style=” border-width:0 ” width=”750″ height=”600″ frameborder=”0″ scrolling=”no”>

    after:
    gcalendar-wrapper.php?title=Analogue%20Sound%20Events&showNav=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&height=600&wkst=1&bgcolor=%23FFFFFF&src=analoguesoundcollective%40gmail.com&hl=en&color=%23875509&ctz=Europe%2FLondon” style=” border-width:0 ” width=”750″ height=”600″ frameborder=”0″ scrolling=”no”>

    Comment by Paul BTW at 5:11 am on June 13, 2013

  170. I am looking to change the cover color of the wrapper but want some of the switches turned off such as title, week and month view etc. Any ideas?

    Thanks,

    Ben

    Comment by Ben at 11:53 am on September 11, 2013

  171. Does anyone know how to remove the branding on the bottom right corner of the calendar (the Google logo). I need it hidden! Thanks

    Comment by Ryan at 12:09 am on September 22, 2013

  172. Question! I was able to successfully change the colors and it looks great, BUT now the times are showing up in military time. Any suggestions on how to change it to standard time? The google calendar settings are set correctly; it is only when the customization wrapper is applied that the time switches to military. Thanks in advance for your help!

    Comment by Jane at 5:58 pm on October 9, 2013

  173. This still works. Awesome Hack, can’t be thankful enough for this.
    For anyone wanting to remove the Google branding logo at the bottom just add the following to CSS styles in gcalendar-wrapper.php.
    .subscribe-image{
    display: none !important;
    }

    Comment by Wasif Ali at 2:31 am on October 21, 2013

  174. Can someone post a snapshot of the “fix word wrap” code location in gcalendar-wrapper.php please? I’ve tried the hint in 138 to no avail. The Google calendar won’t load.

    Comment by Ed Auria at 11:46 pm on November 16, 2013

  175. Hi

    Thanks for all the effort you have put in in this script. I have a similar question as #165. I would like to exchange the color style for the links to to white and use the Google supplied color as background-color. I have tried to use str_replace at the very end before the print out the result but haven´t been able to change the HTML code.

    I have tried to exchange the string ‘te” style=”color:’ with ‘te” style=”color:#ffffff; background-color:’ but the first string never matches… What am I doing wrong?

    I can replace the time for an event so I know I can manipulate the output. Why can’t I match the html code itself

    I would appreciate some help

    Sincerely

    /Thomas

    Comment by Thomas Rambrant at 12:02 pm on February 9, 2014

  176. Chris, this is perfect. I’ve been looking for this for what seems like years! What a fantastic help this script is. Thank you so much!

    Comment by Fred at 6:16 am on April 1, 2014

  177. Hi I am trying to get this to work and have been having trouble. I am trying to include this on a wordpress site. I added the .php file and can not seem to find out where it should be on the site in order for it to work. Any help would be appreciated http://websterbiblechurch.org/calendar/

    Comment by cody at 11:03 pm on May 10, 2014

  178. This is a great script. I’m displaying my calendar in Agenda view, and need to change the colour of the text events are listed in, and also the colour of hyperlinks. Can anyone advise how to do this, please?

    Comment by Gary at 12:56 pm on August 11, 2014

Leave a comment

TrackBack URI

Unitz LLC, 850 North Randolph St., Suite 103 - A38, Arlington, VA  22203 * Tel. 703-539-2542 Email us