Google made a recent change to the Calendar program that I was un-aware of. They have removed the ability to have multiple colors in a single calendar when the calendar is embedded in a public website.
Essentially what this means to you is that all items in the calendar turn out one color. To get multiple colors back you need to jump through a few hoops but it is still possible.
First thing I did was go into the default Calendar that was shared and rename it “Original Name (Default)”. Doing this allows you to remember which calendar is setup for sharing. If you ever need to come back and make any changes to the embed code it makes it much easier to remember which calendar we are going to need to edit.
The second thing you need to do is create a new calendar for EACH color you would like to see on the embedded calendar and name the calendars what you would like the color to represent.
Once logged into Google Calendar under “My Calendars” click the drop down and select “Create New Calendar”.
Once you are done fill out the information that is selected in “Red”. Click the “create calendar” button when you are done.
*Update* I recommend that you add the color to the “Calendar Name”. It just makes it pretty apparent what color and Category you’ve selected.
You will most likely get a warning that says: “Making your calendar public will make all events visible to the world, including via Google search. Are you sure?”. Click yes.
Now you have to select the color for that specific Category Calendar you just made. In our case we will choose Grey.
Now that we have made the all the categories we like we must now take the default calendar. Again because you renamed the default calendar to “Original Name (Default)” You will have no issues figuring out which one to click edit on!
Click dropdown and hit “Calendar settings”
You will need to head half way down the page to “Embed This Calendar”. Click on Customize the color, size and other options.
You will want make sure all the calendars are selected and that you selected the width and height you would like the calendar to be when it appears on your site.
After all your changes have been made make sure that you hit “Update HTML” (at the top of the screen). Select all text into the html in the box and hit “Ctrl+C” to copy it.
Go to your website. In my example the client is using WordPress as the backend content management solution.
Go to the Calendar page – Edit.
Make sure the Tab is selected to “HTML” instead of Visual. COMPLETELY delete any Google Calendar code from the page. Paste the code you copied from the previous step into the page. Click “Update” to save your changes.
If all of the categories are still the same color the reason for that is that you haven’t gone into the calendar and switch the calendar item to the proper category calendar.
To do this go back into the Google Calendar and click edit the items. You should now have multiple Calendars to pick from in a drop down list. Click Save to save the category change.
