Week Planner Card

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

Table of Content

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

Installation

HACS (Recommended)

1. Make sure HACS is installed and working.
2. Add this repository (https://github.com/FamousWolf/week-planner-card) via HACS Custom repositories
3. Download and install using HACS

Manual

1. Download and copy eweek-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.5.1
  type: module
  

• Using the graphical editor
  1. Make sure advanced mode is enabled in your user profile
  2. Navigate to Configuration -> Lovelace Dashboards -> Resources Tab. Hit orange (+) icon
  3. Enter URL /local/week-planner-card.js and select type "JavaScript Module".
  4. Restart Home Assistant.

Configuration

Main Options

Calendars

Texts

Weather

Custom styling using cardmod

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.

Day classes

Event classes

Examples

Minimal

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

Extended

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

Starting on Sunday

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: ''

Past events transparent with card_mod

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;
    }

Show entire current month

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