Adding CSS to Google Calendar iFrame

Question

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!

Answer 1

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.

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