- This topic is empty.
May 2, 2011 at 2:13 pm #32572
Can custom css be applied to a google calendar?
Thank you.May 2, 2011 at 6:15 pm #47931Chris CoyierKeymaster
On a per-user level: https://addons.mozilla.org/en-US/firefox/addon/stylish/May 3, 2011 at 12:42 pm #47781
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:39 pm #47739Brian MeyerParticipant
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.
CheersMay 3, 2011 at 2:25 pm #47650
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 #47652
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 #47620Brian MeyerParticipant
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 formatNovember 15, 2012 at 1:43 pm #114459December 17, 2012 at 12:11 pm #117801arcadian75Participant
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 #139798sillytechieMember
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 #140816fabulosoParticipant
@sillytechie. I’m not sure how you are setting it up but let us know if you still having problems.August 1, 2014 at 7:56 am #177204roadogParticipant
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!September 11, 2018 at 6:52 pm #276572emmanuelParticipant
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?
- The forum ‘CSS’ is closed to new topics and replies.