Skip to main content
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.