10

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
  • 26,720
  • 15
  • 83
  • 122
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

2 Answers2

7

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,614
  • 9
  • 27
  • 37
1

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.

Henry Ecker
  • 31,792
  • 14
  • 29
  • 50
Ben Schnell
  • 123
  • 9