How can you apply custom CSS to Google Calendar?
# May 2, 2011 at 6:15 pm
On a per-user level: https://addons.mozilla.org/en-US/firefox/addon/stylish/# May 3, 2011 at 1:39 pm
Charlie, the sky is the limit with Google calender! I recently utilized it in a build here: http://www.orovalleybicycle.com
Notice the calendar on the right side of the page. That is the XML feed of a google calendar, parsed by a PHP script in to the format you see rendered. My implementation renders the data as an unordered list, with css style attached to different fields. A more ambitious developer could take that same XML feed and render it as a traditional month view calendar. Because I lacked the technical experience to develop this, I used a lightbox to open the google calendar within the page (see the expand full calendar link).
Let me know if I can be of further help.
Cheers# May 3, 2011 at 5:09 pm
Charlie, my conclusions after researching calendars are the following:
1. Google Calendar is an optimal solution because it allows CMS usability and editing for the laymen. The caveat here is that there are traffic limitations with a calendar, so some kind of script would need to be written to cache the data on a schedule.
2. To me, an ideal implementation is something like this:
– The XML feed is decoded/processed by some kind of server side implementation like PHP.
– That data is piped in to a 7 column 4 row table which represents a month’s worth of days.
– Day information is accessed by clicking or floating the cursor over the focus’ed day.
3. Customization would extend beyond what is possible with embedded iframe calendars, so that the calendar could be really small, and/or styled to better match the look & feel of your site for tighter integration.
I’ll look in to some of the resources I found, but basically you’ll want to search for documentation that has to do with:
– PHP to parse XML
– Parsing Google Calendar XML feeds
– How to format tabular/XML data in to a calendar like format# December 17, 2012 at 12:11 pm
Just be aware that if you use the method where you grab the contents of the iframe that the Google Calendar embed provides, that you are still at the mercy of the rendered HTML. If Google ever changes the CSS class names and/or HTML structure, then your code and styles may not work properly.
Other than that caveat, I like that method as a quick way to reuse all the integrated technology that Google has already programmed into their calendar UI.
Here is another similar post about how to do this, with some explanation of the various class names that are generated in the code.
[http://www.webdesignerdepot.com/2012/04/integrating-google-calendar-with-your-website/](http://www.webdesignerdepot.com/2012/04/integrating-google-calendar-with-your-website/)# June 21, 2013 at 3:47 pm
Hey guys, I am trying to incorporate this into a wordpress site but when I go to the custom calendar file, it shows nothing.
For example: http://www.mydomain.ca/custom_calendar.php
is blank. What am I doing wrong? And also, how do I incorporate it into my wordpress site so that when users click the “Schedule” link in the navigation, I can send them to my custom google calendar?# August 1, 2014 at 7:56 am
I’m having trouble implementing the Google calendar embed restyling outlined in this article: http://www.webdesignerdepot.com/2012/04/integrating-google-calendar-with-your-website/
I’ve created my own web page with the source code from my Google calendar, updated the links with googles domain, and run the PHP script when the page loads. I get an error (Call to undefined getElementByTagName() on line 14).
Please let me know if you can offer assistance.
You must be logged in to reply to this topic.