CODEWITHSUNDEEP
javascriptgoogle-apigoogle-calendar-api
Jorge Nunes
Jorge Nunes

Reputation: 248

How to customize Google Calendar with CSS?

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.

Upvotes: 12

Views: 41866

Answers (3)

Ben Schnell
Ben Schnell

Reputation: 133

Another option is to use Styled Calendar 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.

Upvotes: 2

Yonah Karp
Yonah Karp

Reputation: 671

Found a bit of a work around! You can use the filter style on the iframe itself

iframe{
   filter: invert(.9) saturate(0.5) hue-rotate(145deg);
}

So it goes from this: enter image description here

to this: enter image description here

Which I believe looks at least somewhat nicer

Upvotes: 9

hellojava
hellojava

Reputation: 5064

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/

Upvotes: 8

Related Questions