Twenty Fourteen: Changing the Color of an embedded Google Calendar

  • Author
  • #2002114

    Hello, good people of the forums!

    I am looking to change the look and feel of an embedded Google calendar. Is there any (easy) way to override the css of that thing? I would especially like to change the (boring) baby-blue/goldenrod color scheme.

    Thank you for any help!

    The blog I need help with is



    I messed with this a bit on my test site, and wasn’t able to get any CSS changes to a calendar embed to “stick.” My sense is it’s because the calendar isn’t really being rendered on your site, so the CSS rules can’t touch it.

    I don’t know if it will help, but there is a newish widget called “Upcoming Events” that pulls items from ical that might serve the same (or a similar purpose) as the calendar.

    I’ll also mark this thread for staff follow-up in case I’m wrong about styling the calendar.


    I really want the calendar embedded in a page, and my understanding is that a widget wont do that – it will only live in sidebars and footers. Plus the idea is to make the use of the calendar effective both for the staff who will use google calendar on the go but also for site visitors who will only check it once in a while. To have to reenter each events at two places (google calendar AND widget) would not work. Thank you for trying though :)



    Just in case it matters– the “Upcoming Events” option works as a shortcode and a widget, so you could have the event list show up as the main info on the page. It also pulls from ical which means your staff people can update the google calendar the way they normally do, and the updates will automatically show up on the website as well.

    Here’s more info on how it works:

    I know that’s still not exactly what you wanted (it is an events list and not a calendar grid) but it should get you pretty close.



    You can change the colour of a Google calendar at Google.



    @raincoaster unfortunately, the options for changing colors on the Google side of the equation are quite limited.


    Given that the Google Calendar is within an iframe within the Google code, we are, at this time, unable to change it, so the Google color options are your only choice. Sorry I don’t have better news for you on that. :(

The topic ‘Twenty Fourteen: Changing the Color of an embedded Google Calendar’ is closed to new replies.