Skip to main content
The day_styles configuration lets you define a list of rules that change how individual calendar day cells look. Each rule pairs a condition with a style object, and an optional priority integer decides which rule wins when multiple conditions match the same day. Use this feature to visually distinguish weekends from weekdays, draw attention to today’s cell, dim days in the past, or automatically tint days that have events scheduled.

​
Rule Structure

Each entry in day_styles has three top-level keys:
  • condition — a string describing which days the rule applies to
  • style — the visual properties to apply to matching days
  • priority — optional integer (default 0) that resolves conflicts when multiple rules match the same day

​
Condition Values

​
condition
string
One of the following named conditions. A day matches when it satisfies the specified condition.
ValueMatches
todayThe current calendar day
pastAny day before today
futureAny day after today
weekendSaturday or Sunday
weekdayMonday through Friday
has_eventAny day that has at least one visible event from a specific calendar (requires the calendar sibling key)
day_of_weekA specific weekday (requires the day_of_week sibling key — see below)

​
Using day_of_week

When condition is day_of_week, add a sibling day_of_week key with the target day number (0 = Sunday, 6 = Saturday). You can also provide a list of numbers to match multiple days with one rule. 
day_styles:
  - condition: day_of_week
    day_of_week: 1        # Monday
    style:
      background_color: '#E3F2FD'

​
Using has_event

When condition is has_event, you must also provide a calendar sibling key containing the entity ID (or virtual calendar ID) to watch. The rule only applies to days where that specific calendar has at least one event. You can optionally narrow the rule further by adding a title_match sibling key. When set, the rule only matches days where the named calendar has at least one event whose title contains the given string. title_match uses the same matching syntax as event_styles and day_badges — prefix the value with exact: for an exact match or regex: for a regular expression. 
# Any event on calendar.work makes the day match
day_styles:
  - condition: has_event
    calendar: calendar.work
    style:
      background_color: '#FFF9C4'

# Only days where calendar.work has a "standup" event match
day_styles:
  - condition: has_event
    calendar: calendar.work
    title_match: standup
    style:
      background_color: '#E3F2FD'
      border_color: '#1565C0'
      border_width: 2

​
Style Fields

​
style.background_color
string
A hex color string applied to the day cell’s background. You can also pass 'auto' to let the card automatically compute a soft tint derived from the event colors present on that day.
​
style.opacity
number
A number between 0 and 1 that controls the day cell’s overall transparency.
​
style.border_color
string
A hex color string for the day cell’s border.
​
style.border_width
number
The border width in pixels.

​
Priority

​
priority
integer
default:"0"
When two or more rules match the same day, the one with the highest priority is applied. If priorities are equal, the first matching rule in the list wins.

​
Convenience Shorthands

In addition to the full day_styles list, the card also accepts a pair of shorthand options for styling today’s cell. These are processed as day_styles rules internally and are a quick alternative to writing a full condition block.
​
today_background_color
string
A hex color shorthand for setting today’s background. Equivalent to a day_styles rule with condition: today and style.background_color set to the same value.
​
today_style
object
An object with any combination of background_color, opacity, border_color, and border_width applied to today’s cell.
today_style:
  background_color: '#E3F2FD'
  border_color: '#1565C0'
  border_width: 2

​
Examples

​
Highlight weekends with a light gray background

This rule gives Saturday and Sunday cells a subtle gray tint to help them stand out from the work week. 
day_styles:
  - condition: weekend
    style:
      background_color: '#F5F5F5'

​
Show today with a bold blue background

A high priority of 10 ensures this rule overrides any other day style that might also match today, such as weekend. 
day_styles:
  - condition: today
    style:
      background_color: '#1565C0'
    priority: 10

​
Dim past days

This rule reduces the opacity of every day in the past, creating a visual separation between what has happened and what is coming up. 
day_styles:
  - condition: past
    style:
      opacity: 0.4

​
Auto-tint days that have events

Instead of choosing a fixed background color, pass 'auto' and let the card compute a soft tint derived from the event colors on each matching day. 
day_styles:
  - condition: has_event
    calendar: calendar.personal
    style:
      background_color: 'auto'

​
Combine multiple rules

Rules are independent and additive. Here, past days are dimmed, weekends get a warm tint, and today is boldly highlighted above both. 
day_styles:
  - condition: past
    style:
      opacity: 0.4
    priority: 1
  - condition: weekend
    style:
      background_color: '#FFF8E1'
    priority: 2
  - condition: today
    style:
      background_color: '#1565C0'
    priority: 10
Use background_color: 'auto' on days with events alongside a fixed background color for today. Set a higher priority on the today rule so it always wins, even if today has events.