How to customize Google Calendar with CSS?

Question

I have a iframe with Google Calendar:

<iframe name="iframe1" id="iframe1" src="https://calendar.google.com/calendar/embed?height=600&amp;wkst=1&amp;bgcolor=%230c4da1&amp;src=example.com" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

Doubt: I can customize Google Calendar using CSS? If not, I can customize otherwise?

I would like to change font size, color, etc.

Answer 1

Google Calendar exposes its APIs. They are available here and these are the same APIs used to customize the layout for android Calendar app.

https://developers.google.com/calendar/

You can write whatever CSS/layout on top of these APIs

Might not be related but there is an opensource repo that can help you in case you are only looking for google calendar events.

Check this: http://sugi.github.io/jquery-gcal-flow/

Answer 2

Another option is to use Style My G Cal which is a free service that allows you to style a Google Calendar embed with some UI options. It also allows custom CSS styles once the calendar is embedded.