Adding CSS to Google Calendar iFrame

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 t开发者_开发知识库o 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!

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.

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/

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:

• Styled Calendar
• Tockify
• ChronoFlo Calendar

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