Customize Google Calendar with CSS

Bootstrap Studio Help
1

Hello all,

I'm having a hell of a time trying to customize an embedded Google Calendar so that it matches our site's color scheme. Anyone have any ideas on how to accomplish this? If it's even possible that is.

Thank you in advance!

-SD

2

Very likely not possible. Don't know because I don't use google stuff personally, but I can imagine that it's an iframe and I believe you can't override the CSS of an iframe unless it's from the same domain. Since it's a google thing in an iframe it's a Cross Domain security issue to be able to alter things in an iframe that is not from the same domain. If it's not in an iframe (i.e. an Ajax call that embeds into a div that then doesn't contain an iframe), then you should be able to override it by some tricky CSS rule path like:

<div id="myGoogleCalendarWrapper">
    // Google's Ajax Embed
    <div id="googleCalendarWrapper">
        <div id="googleCalendarWrapper">
            <div id="googleCalendar">
                <div class="year"> 2018
                </div>
            </div>
        </div>
    </div>
</div>

#googleCalendar .year{ //Google's CSS
    color: red;
}

To override it, you'd very likely would have to do something like this.

#myGoogleCalendarWrapper #googleCalendarWrapper #googleCalendarWrapper #googleCalendar .year{
    color: blue;
}

Basically you have to start with your wrapper then declare the exact same CSS rule your trying to override but with prepending your wrappers ID/Class, because your CSS rules will very likely come before Google's CSS rules.

I hope that makes sense :)

Saj

3

Google has it's own calendar settings for making changes to the theme setups. They aren't perfect, but they do have customization, but it's at the Google site level and no I don't think you can override it very easily at all. I would check with them as they may offer some ideas on how to do more than what they offer on the site.