7

I'm working on a site that needs a basic calendar, and thought of adding in Google Calendar. The thing is that I would really like to style the whole embedded calendar, but it's in an iframe and even adding !important to the targeted classes does not work.

Is there any way of adding some css to that iframe? Through some JavaScript or something?

Thanks!

Victor Ionescu
  • 985
  • 3
  • 9
  • 16
  • 6
    there is a cool article on web designer depot: Integrating Google Calendar with your website http://www.webdesignerdepot.com/2012/04/integrating-google-calendar-with-your-website/ –  Aug 23 '12 at 20:01

3 Answers3

5

You are not going to be able to do any styling on the iFrame, if you do you'll get the cross-domain origin error. Essentially, you are locked out of tampering with an iframe for security reasons. You should look into pulling the feed/json of the google calendar and creating the entire view yourself.

Adam Simpson
  • 3,591
  • 2
  • 22
  • 27
2

The settings offered by Google are only basic, however, and so for it to fit the unique style of your site, you’ll want a bit of extra editing power. Unfortunately adding CSS rules to the parent document doesn’t work, even when adding an !important directive to each rule.

https://www.webdesignerdepot.com/2012/04/integrating-google-calendar-with-your-website/

yayapipi
  • 21
  • 5
1

Because of the same-origin policy, it isn't possible to inject CSS into an iframe.

However, these days there are a number of third party apps that make it easy to style and embed Google calendars.

Here is a short list of options:

Or, if you'd rather use something open source, FullCalendar is a great solution. Here is some documentation on how to use their Google Calendar plugin: https://fullcalendar.io/docs/google-calendar

*Full disclosure, I'm a member of the Styled Calendar team

Daniel Ellis
  • 181
  • 1
  • 3