11

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.

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
Jorge.M
  • 238
  • 1
  • 3
  • 12
  • 1
    see [https://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe](https://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe). Not possible normally. But the second answer there has a nasty hack that allows what you're wanting. – John Ellmore Mar 15 '18 at 18:05
  • Is there another way to change `CSS`? API to do this? – Jorge.M Mar 15 '18 at 18:10
  • @JorgeMatheus Not really AFAIK, most probably you 'll have to use a hack – Dipen Shah Aug 28 '18 at 04:48

3 Answers3

8

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/

hellojava
  • 4,904
  • 9
  • 30
  • 38
4

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

Yonah Karp
  • 581
  • 7
  • 22
  • After a few hours of searching this seems to be a solution I'm looking for. Tapping into the gcal API is a bit overkill for me, and this looks 1 million times better with one line of code. – Dalton Jan 13 '23 at 12:04
2

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.

Ben Schnell
  • 133
  • 9