How can you apply custom CSS to Google Calendar?

[charlie]

Can custom css be applied to a google calendar?

Thank you.

[Chris Coyier]

On a per-user level: https://addons.mozilla.org/en-US/firefox/addon/stylish/

[charlie]

I need to apply custom css to an embedded google calendar in a website. (I didn’t mention it was an embedded calendar on a website in first post.)

Can Stylish do that? Or is there another way(s)?

[Brian Meyer]

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

[charlie]

Very nice.

I’ve styled rss/xml feeds in WordPress using plugins, but never on a plain html/css website. Is there a tutorial page somewhere that would get me started?

[charlie]

P.S.

I’ve also found this link… although I don’t quite understand it. Seems to good to be true.

[Brian Meyer]

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

[niknetniko]

You might want to take a look at http://sugi.github.com/jquery-gcal-flow/

[arcadian75]

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/)

[sillytechie]

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?

[fabuloso]

@sillytechie. I’m not sure how you are setting it up but let us know if you still having problems.

[roadog]

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.

Thanks!

[emmanuel]

Hi Brian,

I know this is an old post, butI liked what you did with Gcalendar and it’s styling on the bike website. Are you able to suggest a quickand easy method of impleneting this on a WP site?

[Author]

Posts