Skip to main content

How to use your calendar colors on your website

Show each event in its calendar's color from Google Calendar, or its category color from Outlook, with one Design tab setting.

Written by Piotr Poźniak

Revisual can show your calendar's colors on your website, so classes, workshops and special events are easy to tell apart at a glance:

  • Google Calendar: each event uses its calendar's color, or its own event color if you set one.

  • Outlook and Microsoft 365 calendars: each event uses its category color.

Turn it on or off

This is on by default. To check or change it, open your calendar widget and go to the Design tab › Events › Event details, then turn Use calendar color as accent color on or off. Click Save.

When it's off, events use the colors you set on the Design tab instead.

Colors for single events (Google Calendar)

In Google Calendar you can give one event its own color. It overrides the calendar's color, and Revisual shows it the same way. In this example the calendar is yellow and one event is lilac:

With the setting on, your widget shows both colors:

What it looks like

The setting works in every template. Where the color appears depends on the template. Some examples:

Template

Setting on

Setting off

Monthly view

The event name background uses the calendar color.

Uses Event name background from the Design tab.

Weekly view: Events list

The events list uses the calendar color. The week grid keeps Events-Indication.

Uses Left border and Events-Indication.

Weekly view: Pills

Each pill uses its calendar color.

Uses Pills-Background.

Weekly view: Stacks

Each stack uses its calendar color.

Uses Stack-Accent color.

Cards (Grid)
Events without an image

The card uses its calendar color.

Uses Left border.

Related

Did this answer your question?