Can I customise the colours in an embedded Google Calendar?

HTML & CSS
1

Hi All

I have embedded a Google Calendar into a website.

I know you can change the main background colour but can you customise more?

In the below calendar I have set the background to white:

What I really want to do is set the main background colour to a dark colour (which I can do) however I also want to set the heading to be white, the light blue colour to my dark colour, all text to while and the dark blue buttons and links to red.

Is there anyway of doing this at all?

If so how?

Any help would be great.

mrmbarnes

2

You cannot apply custom CSS to calendar because it’s inside an iframe. There is no help from JS as well, because iframe is loading from different domain.

3

For an individual user, you can override the CSS with a plugin in the browser (Stylus, Stylish, etc).

For global display, you’d need some sort of extra processing - the gcal information is API based, so you can build and create your own reader/displayer of the data, or use another premade renderer. Couple of examples:

4

Thank for the help… the second example looks pretty much exactly what I am looking for however I do not use WordPress at all… everything I do is in PHP.

I will see if I can find anything like that for PHP… in the meantime do you know of any?

mrmbarnes

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.