Event Styles: Custom Colors and Icons for Calendar Events

Use event_styles rules to apply colors, icons, opacity, and hide overrides to Home Assistant calendar events matched by title, calendar, location, or date.

The event_styles configuration lets you define a list of rules that change how individual events look on your calendar. Each rule specifies which events to target through a match object and how to style them through a style object. When multiple rules match the same event, the rule with the highest priority value wins. This makes it easy to build layered styling — for example, dimming all past events while still highlighting specific recurring ones at a higher priority.

Rule Structure

Each entry in event_styles is a rule with three top-level keys:

• match — describes which events the rule applies to
• style — describes how matching events should look
• priority — optional integer (default 0) that controls which rule wins when multiple rules match the same event

Match Fields

Use one or more of the following fields in the match object. By default, an event must satisfy all specified fields to be considered a match. For OR / NOT logic, use the logical operators below.

match.calendar · string

The entity ID of a specific Home Assistant calendar. Only events from that calendar entity will match.

match.title · string

A substring to look for in the event title. The match is case-insensitive. You can also pass a regex pattern wrapped in forward slashes, e.g. /standup/i.

match.summary · string

Alias for match.title. Both names map to the event summary field. Use whichever feels more natural.

match.description · string

A substring to look for in the event description field.

match.location · string

A substring to look for in the event location field.

match.all_day · boolean

When true, only matches all-day events. When false, only matches timed events.

match.past · boolean

When true, only matches events whose end time is in the past. When false, only matches events that are not yet past.

Logical Operators

For compound rules, match accepts three logical operator keys. Each operator takes either a single sub-condition object or an array of sub-condition objects, and sub-conditions use the same match-field syntax as a top-level match block — including nested operators.

match.any · array

OR logic. The rule matches when at least one of the listed sub-conditions matches.

match.all · array

AND logic. The rule matches when all listed sub-conditions match. Same as combining fields at the top level, but useful when nesting inside any or not.

match.and · array

Alias for match.all.

match.not · object | array

NOT logic. The rule matches when the listed sub-condition (or none of the listed sub-conditions) matches.

Example: events on the work OR personal calendar

event_styles:
  - match:
      any:
        - calendar: calendar.work
        - calendar: calendar.personal
    style:
      opacity: 0.6

Example: all-day events that are NOT in the past

event_styles:
  - match:
      all_day: true
      not:
        past: true
    style:
      color: '#1565C0'
      font_color: '#ffffff'

Style Fields

The style object accepts the following properties to control how matched events are rendered.

style.color · string

Alias for style.background_color. Hex color string (e.g. '#1565C0') applied to the event’s background or bar color.

style.background_color · string

Hex color string applied to the event’s background or bar color. Equivalent to style.color.

style.font_color · string

Hex color string applied to the event’s text. Use this to ensure readable contrast when you change the background color.

style.opacity · number

A number between 0 and 1 that controls the event’s transparency. Use 0.4 to visually mute events without hiding them entirely.

style.filter · string

A CSS filter string applied to the event element. For example, grayscale(100%) removes all color from matching events.

style.icon · string

An MDI icon name (e.g. mdi:repeat) to attach to matching events. Combine with icon_position to control placement.

style.icon_position · string · default: "before_title"

Controls where the icon is rendered. Use before_title to place it inline before the event title, or corner to display it as a small overlay in the corner of the event chip.

style.icon_color · string

Hex color string applied to the matched style icon. Defaults to the event’s text color.

style.icon_size · string | number

Overrides the icon size. Accepts a number (interpreted as pixels) or any CSS length string such as '14px' or '1.1em'.

style.hide · boolean

When true, matching events are completely removed from the calendar view. Hidden events are not counted toward day event totals.

style.hide_time · boolean

When true, suppresses the time label on matching events even if times would otherwise be shown.

style.show_time · boolean

When true, forces the time label to render on matching events even if it would otherwise be hidden (for example, by hide_times_for_calendars).

style.hide_event_calendar_bubble · boolean

When true, hides the small calendar-color dot on matching events. Useful when you’ve added a custom icon and don’t want the default indicator competing with it.

style.show_event_location · boolean

Per-rule override of the global show_event_location setting. Set to true to force locations on for matching events, or false to hide them on matching events only.

style.use_short_location · boolean

Per-rule override of the global use_short_location setting.

style.event_font_size · string | number

Per-rule override of the event title font size. Accepts a number (pixels) or CSS length string.

style.event_time_font_size · string | number

Per-rule override of the event time font size. Accepts a number (pixels) or CSS length string.

style.event_location_font_size · string | number

Per-rule override of the event location font size. Accepts a number (pixels) or CSS length string.

style.event_title_prefix · string

Per-rule override of the global event_title_prefix mode. Accepted values: none, badge_icon, friendly_name.

Priority

priority · integer · default: "0"

When two or more rules match the same event, the rule with the highest priority integer is applied. Rules with the same priority follow the order they are defined in the list (earlier rules win).

Use priority to layer general rules with specific overrides. For example, set a low-priority rule that dims all past events, then add a high-priority rule that keeps a specific calendar’s events fully visible regardless.

Examples

Color all events from a work calendar

This rule applies a deep blue background and white text to every event from calendar.work.

event_styles:
  - match:
      calendar: calendar.work
    style:
      color: '#1565C0'
      font_color: '#ffffff'

Hide events titled “Free”

This rule completely removes any event whose title contains the word “Free” from the calendar view.

event_styles:
  - match:
      title: 'Free'
    style:
      hide: true

Add a corner icon to a specific calendar’s events

This rule stamps a briefcase icon in the corner of every event from calendar.work. A priority of 5 ensures it takes precedence over lower-priority color rules.

event_styles:
  - match:
      calendar: calendar.work
    style:
      icon: mdi:briefcase
      icon_position: corner
    priority: 5

Mute all-day events with opacity

This rule reduces the opacity of all-day events to 0.4, visually de-emphasizing them without hiding them.

event_styles:
  - match:
      all_day: true
    style:
      opacity: 0.4
    priority: 1

Dim past events

This rule applies a grayscale filter and reduced opacity to any event that has already passed, giving the calendar a clear visual split between past and upcoming.

event_styles:
  - match:
      past: true
    style:
      filter: 'grayscale(100%)'
      opacity: 0.5
    priority: 1

Combine multiple match conditions

You can narrow a rule by specifying more than one match field at the same time. This rule applies a grayscale filter only to past all-day events from a specific calendar.

event_styles:
  - match:
      calendar: calendar.holidays
      all_day: true
      past: true
    style:
      filter: 'grayscale(100%)'
      opacity: 0.5
    priority: 2

All style values are sanitized before they are applied to the DOM. Attempting to inject HTML or JavaScript through a color, filter, or other style field will be stripped out automatically.