How can I improve the appearance of embedded Google Calendar

My client insisted I embed a Google Calendar in his web site, but we all feel the result is can see it here
All the events are highlighted in the same colour, and it’s really boring. In the native Google calendar I think events can be categorised and highlighted in different colours accordingly. I’d like to do the same with the embedded version, but I’m not sure it’s possible.

There are problems trying to style it because it’s in an <iframe>. I know I can style the <iframe> itself in a limited way, but I want to style the HTML inside it. I came across a promising article integrating-google-calendar-with-your-website/. But it was written in 2012 and is now closed to comments.

I started to follow through the procedure described, but ran into a bit that makes no sense to me. It reads:

As you can see, both tags contain relative URLs, they need prefixing with “; so they look like this:

This points your iframe to the new page on your domain and not Google’s,

But it seems to me that it still points firmly to

There was one comment to this effect, but the author replied claiming that it was correct. I wonder if a chunk of text has got lost somehow.

I have downloaded the linked CSS and JS files and saved them locally, and done the same with the URL inside the <iframe>. But I run into authentication issues when I try to load from the local sources. So IF that was what the author of the article intended, it doesn’t seem to work.

Can anyone suggest (or guess) what the intention was here, or tell me another way of going about it, please ?

Never done it myself but I found some pages that may help:

Thank you.

I’m already working on the first link you’ve given, which so far seems promising.
The second is the one that has the nonsensical bit that was the subject of my post.
The third is unknown to me, but I’ll follow it up.

NP, have a google around as it’s been mentioned a lot!

Indeed it has, but that seems to be because there are very few good answers !