Custom Home Assistant card displaying a responsive overview of multiple days with events from one or multiple calendars

• Installation
  • HACS (Recommended)
  • Manual
• Configuration
  • Main options
  • Calendars
  • Texts
  • Weather
• Custom styling using cardmod
• Examples

1. Make sure HACS is installed and working.
2. Search for week-planner-card.
3. Download and install using HACS.

1. Download and copy week-planner-card.js from the latest release into your config/www directory.
2. Add the resource reference to Home Assistant configuration using one of these methods:

• Edit your configuration.yaml Add:

  resources:
    - url: /local/week-planner-card.js?version=1.14.1
  type: module

• Using the graphical editor
  1. Make sure advanced mode is enabled in your user profile
  2. Navigate to "Settings" -> "Dashboards".
  3. Click on the 3 vertical dots in the top right corner and select "Resources".
  4. Click on the "Add resource" button in the bottom right corner.
  5. Enter URL /local/week-planner-card.js and select type "JavaScript Module".
  6. Restart Home Assistant.

Note regarding Month View: When days is set to month and startingDay is configured as a specific weekday (e.g., monday to sunday), the calendar will align the display with the specified starting day of the week. In this mode, days falling outside the current month will be excluded from the view.

See Actions documentation. Currently only the tap action is supported.

By default, the columns are based on the width of the card. You can use these settings to override the default number of columns.

Multi day mode determines how multi day events are displayed. The following options are available:

• default
  On the first day, the start time is the start time of the event. On the last day, the end time is the end time of the event. Any middle days will be shown as full day events.
• single
  The event is only shown on the first (available) day. multiDayTimeFormat is used for formatting of the time.
• multiple
  The event is shown on all (available) days. multiDayTimeFormat is used for formatting of the time.

You can replace text in the title. For example:

replaceTitleText:
  "Search text": "Replace text"
  "Foo": "Bar"

This will replace the text "Search text" with "Replace text" and "Foo" with "Bar". This option is not available in the visual editor.

Like with most cards, you can add custom styling to this card using card_mod. To make it easier to add custom styles to days and/or events, there are several classes that days and events can have. Additionally, there are data attributes you can use in CSS selectors.

type: custom:week-planner-card
calendars:
  - entity: calendar.my_calendar_1

type: custom:week-planner-card
calendars:
  - entity: calendar.my_calendar_1
    color: '#e6c229'
  - entity: calendar.my_calendar_2
    color: '#1a8fe3'
weather:
  entity: weather.my_weather_service
  showTemperature: true
  showLowTemperature: true
days: 14
noCardBackground: true
eventBackground: rgba(0, 0, 0, .75)
locationLink: https://www.openstreetmap.org/search?query=
locale: nl
texts:
  noEvents: Geen activiteiten
  fullDay: Hele dag
  today: Vandaag
  tomorrow: Morgen

type: custom:week-planner-card
calendars:
  - entity: calendar.my_calendar_1
    color: '#e6c229'
  - entity: calendar.my_calendar_2
    color: '#1a8fe3'
startingDay: sunday
texts:
  today: ''
  tomorrow: ''
  yesterday: ''

type: custom:week-planner-card
calendars:
  - entity: calendar.my_calendar_1
    color: '#e6c229'
  - entity: calendar.my_calendar_2
    color: '#1a8fe3'
card_mod:
  style: |
    .event.past {
      opacity: .3;
    }

type: custom:week-planner-card
calendars:
  - entity: calendar.my_calendar_1
    color: '#e6c229'
  - entity: calendar.my_calendar_2
    color: '#1a8fe3'
card_mod:
  style: |
    .day.today {
      box-sizing: border-box;
      border: 2px solid #00ffff;
      border-radius: 6px;
      box-shadow: inset 0 0 5px #00ffff;
      margin: 2px;
    }

This will style events with Word1 as part of the title or Word2 as the exact title with a red background.

type: custom:week-planner-card
calendars:
  - entity: calendar.my_calendar_1
  - color: #e6c229
card_mod:
  style: |
    .event[data-summary~="Word1"],
    .event[data-summary="Word2"] {
      background-color: #ff0000 !important;
    }

type: custom:week-planner-card
calendars:
  - entity: calendar.my_calendar_1
days: month
startingDay: month

type: custom:week-planner-card
calendars:
  - calendar.my_calendar_1
dayFormat: '''<span class="number">''d''</span> <span class="month">''MMMM''</span>'''

This can not be done through the GUI editor, but has to be done in the YAML configuration.

type: custom:week-planner-card
calendars:
  - entity: calendar.my_calendar_1
texts:
  yesterday:
  today:
  tomorrow: