Grow your CSS skills. Land your dream job.

How can you apply custom CSS to Google Calendar?

  • # May 2, 2011 at 2:13 pm

    Can custom css be applied to a google calendar?

    Thank you.

    # 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 12:42 pm

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

    # May 3, 2011 at 1:08 pm

    No, because Google Calender is inside of an iFrame you can not modify it.

    # 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 2:25 pm

    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?

    # May 3, 2011 at 2:31 pm

    P.S.

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

    # 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

    # November 15, 2012 at 1:43 pm

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

    # 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?

    # June 27, 2013 at 11:12 pm

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

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".