famouswolf/week-planner-card

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

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.6.0
  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

Name	Type	Default	Supported options	Description	Version
type	string	Required	custom:week-planner-card	Type of the card	1.0.0
title	string	optional	Any string	Card title	1.6.0
days	number | string	7	Any positive integer number | month	The number of days to show	1.0.0
startingDay	string	today	today | tomorrow | yesterday | sunday | monday | tuesday | wednesday | thursday | friday | saturday | month	Day to start with	1.2.0
hideWeekend	boolean	false	false | true	Do not show Saturday and Sunday	1.2.0
noCardBackground	boolean	false	false | true	Do not show default card background and border	1.0.0
eventBackground	string	var(--card-background-color, inherit)	Any CSS color	Background color of the events	1.0.0
compact	boolean	false	false | true	Use compact mode, decreasing several spacings and font sizes	1.2.0
updateInterval	number	60	Any positive integer number	Seconds between checks for new events	1.0.0
calendars	object list	Required	See Calendars	Calendars shown in this card	1.0.0
texts	object list	{}	See Texts	Texts used in the card	1.0.0
weather	object	optional	See Weather	Configuration for optional weather forecast	1.1.0
dayFormat	string	optional	See Luxon format	Format of the date at the top of the day. This is not escaped, so HTML is allowed here	1.6.0
dateFormat	string	cccc d LLLL yyyy	See Luxon format	Format of the date in event details	1.0.0
timeFormat	string	HH:mm	See Luxon format	Format of the time	1.0.0
locale	string	en	Any locale string supported by Luxon	Locale used for day and month texts	1.1.0
locationLink	string	https://www.google.com/maps/search/?api=1&query=	Any URL	Link used for event location in the detail popup	1.1.0
showLocation	boolean	false	false | true	Show event location in overview	1.3.0
hidePastEvents	boolean	false	false | true	Do not show past events	1.3.0
hideDaysWithoutEvents	boolean	false	false | true	Do not show days without events, except for today	1.4.0

Calendars

Name	Type	Default	Supported options	Description	Version
entity	string	Required	calendar.my_calendar	Entity ID	1.0.0
color	string	optional	Any CSS color	Color used for events from the calendar	1.0.0

Texts

Name	Type	Default	Supported options	Description	Version
fullDay	string	Entire day	Any text	Text shown for full day events instead of time	1.0.0
noEvents	string	No events	Any text	Text shown when there are no events for a day	1.0.0
today	string	Today	Any text	Text shown for today instead of the week day. Set to empty to show week day	1.0.0
tomorrow	string	Tomorrow	Any text	Text shown for tomorrow instead of the week day. Set to empty to show week day	1.0.0
yesterday	string	Yesterday	Any text	Text shown for yesterday instead of the week day. Set to empty to show week day	1.2.0
sunday	string	Name of Sunday based on locale	Any text	Text used to override Sundays	1.1.0
monday	string	Name of Monday based on locale	Any text	Text used to override Mondays	1.1.0
tuesday	string	Name of Tuesday based on locale	Any text	Text used to override Tuesdays	1.1.0
wednesday	string	Name of Wednesday based on locale	Any text	Text used to override Wednesdays	1.1.0
thursday	string	Name of Thursday based on locale	Any text	Text used to override Thursdays	1.1.0
friday	string	Name of Friday based on locale	Any text	Text used to override Fridays	1.1.0
saturday	string	Name of Saturday based on locale	Any text	Text used to override Saturdays	1.1.0

Weather

Name	Type	Default	Supported options	Description	Version
entity	string	Required	weather.my_weather_service	Entity ID	1.1.0
showCondition	boolean	true	false | true	Show condition icon	1.1.0
showTemperature	boolean	false	false | true	Show temperature	1.1.0
showLowTemperature	boolean	false	false | true	Show low temperature	1.1.0

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

Class	Description	Version
today	The current day	1.5.0
tomorrow	The next day	1.5.0
yesterday	The previous day	1.5.0
future	Day in the future	1.5.0
past	Day in the past	1.5.0
sunday	Day is a sunday	1.6.0
monday	Day is a monday	1.6.0
tuesday	Day is a tuesday	1.6.0
wednesday	Day is a wednesday	1.6.0
thursday	Day is a thursday	1.6.0
friday	Day is a friday	1.6.0
saturday	Day is a saturday	1.6.0

Event classes

Class	Description	Version
fullday	Event lasts the full day	1.5.0
ongoing	Currently ongoing	1.5.0
future	Event in the future	1.5.0
past	Event in the past	1.5.0

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

Show month with each day

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

week-planner-card's Issues

Full Day Event not showing when starting day is today

The Full Day Events are not showing for me when starting day is today.

As a workaround I have to set the starting day to yesterday, then they show in the today section.

• Component Version v1.4.0
• Home Assistant OS 12.3
• Home Assistant Core Version 2024.6.1

Request: Navigate between months

First of all, love the card.
But it would be awesome if we would be able to navigate to future and past dates in the same way we can navigate with the built in calendar.

Style past events differently

It is possible to hide past events with hidePastEvents in configuration, but it should also be possible to still show the past events and style them differently.

Ability to show month

First off, thanks for creating this. It looks amazing.

I am using it to show a lot more than a week though. It would be useful if there was some way to differentiate months. I think the most simple would be to add the option to have the month visible? Perhaps something like this

Hide days without any events

Would like to suggest an option to hide days without anything planned.

• Today should always be shown even without events.
• "days" options should still be respected to still only show events x days in the future.

Add legend for calendar colors

Add the ability to include a "legend" to indicate which color is which calendar. Similar to attached image:

Weather forecast is offset by 1 day

Depending on the service used, the weather forecast could start with tomorrow, not today. If that is the case, the forecast for tomorrow is shown for today. There is probably a date in the forecast, so this should be checked. If there is no forecast for today, perhaps the current weather information can be shown.

Visual editor

It should be possible to configure the card using the visual editor

Keeps loading when weather is enabled

When weather is enabled the card keeps loading after a short while. This is because this.loading gets below 0 because it is decreased every time the weather websocket callback is called.

Hide All Day Events

I'd love to see an option implemented to hide all day events from showing in the calendar.

Add weather forecast to days

Each day that has weather forecast available should be able to get a weather icon and min/max temperature next to or below the date. This should be optional.

Card Mod not working from examples

I have card mod installed and have some things set up based on examples from the docs and other issues, and some are working, some are not. For example here, the card background works and is the same color as the bar, but the date isn't red and past events aren't transparent.

card_mod:
  style: |
    .day.today .date {
      color: red;
    }
    .event.past {
      opacity: .3;
    }
    .event {
      background-color: var(--border-color) !important;
    }

Primacy of Calendars

How is the primacy of calendars determined when it comes time to display events with the same starting time, e.g. entire day events? It doesn't appear to be related to the sequence in which the calendars are entered in the card yaml.

Issue Installing via HACS

Getting the following error when adding the custom repo:
<Integration FamousWolf/week-planner-card> Repository structure for v1.5.1 is not compliant

Filtering Events

Is there a way to filter events in or out so that they do or don’t appear in the calendar? I subscribe to some work and school (my kids) calendars that I don’t control, and I would like to restrict the number of events that appear on my calendar as not all of the events posted in the public calendar are pertinent to myself or my family?

thanks,
B

Add loading indicator

A loading indicator should be shown when waiting for API calls

Remove box shadow when noCardBackground is set

When noCardBackground is set, any box-shadow set on the card should also be removed

Show only "tomorrow", "the day after tomorrow" etc.

Hello,

thanks for this great card. I am playing around with it and i am wondering if it's possible to show only the tomorrow date or the day after tomorrow? Maybe with card-mod?

So basically i would like to set "days: 2" but hiding the current day.

Thanks

Request: Add CSS class for weekend (or days of the week)

I am currently using the rolling week format, which is nice, but it can be hard to spot the weekend. It would be nice to format the weekend days differently (probably a different background color).

Please could you add a CCS class to describe the day or whether it is the weekend.

Thanks,

The weather is not displayed

weather:
  entity: weather.openweathermap
  showTemperature: true
  showLowTemperature: true

weather: weather.openweathermap

I don't have the weather displayed, and it's loading endlessly. What is the reason for this?

card_mod is not applied

When using card_mod with this card it doesn't work. The styles aren't applied. Debug also doesn't give any information. The styles are (sometimes) applied in the preview when editing the card.

Days are not updated when the day ends

If you keep the view turned on during the night and startingDay is set to today (or not set at all), the first day shown the next morning is yesterday.

When fetching the events there should be a check if startDay is still the correct start day.

Entire Month not working

When I try to show the entire month nothing will be displayed.

Component Version v1.4.0
Home Assistant OS 12.3
Home Assistant Core Version 2024.6.1

Make columns configurable

Right now the number of columns is hardcoded based on the width of the card. This should be made configurable. It should still be responsive, but the cutoff points and the number of columns should be configurable.

Custom Colors Per Calendar

I have a few different calendars for each family member I have the full background color set via card mod, not just the bar. As such, some calendars I need to have darker text vs others, otherwise it's hard to read white text on a light background. I'm requesting the ability to set text color for the events, times, etc per calendar, not just overall. Can this already be done via card_mod?

Showing Today for 1 day excludes entries after midnight GMT

When displaying just today on a dashboard, only items from midnight local through 5:00 p.m. local are displayed. My time zone is GMT -700, so the cutoff corresponds to midnight GMT.

type: custom:week-planner-card
calendars:
  - entity: calendar.chris
    color: '#1976d2'
timeFormat: t
days: 1
startingDay: today

If I start playing with the days parameter, setting it to 1.2, for example, the full day will be displayed, but it will also display Tomorrow, with no events.

Desired behavior: Displaying Today for 1 day should cover all events from midnight to midnight local time.
Additional adjustment: Use only integer portion of Days parameter

File listed for Manual Installation in ReadMe does not exist

I tried using HACS (left comment under issue Add to hacs repository) but it says this repository is not valid. I tried to follow manual download instructions and the file eweek-planner-card.js does not exists. I also thought it may be a typo and searched for week-planner-card.js but that does not exist either.

I did note that your Add to hacs repository issue was not closed yet, so if this is part of that same request, feel free to just close this one.

Love your card, it does EXACTLY what I was looking for, so fingers crossed I can install it!

For the love of god i am unable to display it in Home assistant as Horizantal

Trying to build this i managed to get the Calendar setup but everytime the days of the week are vertically 1 above the other is there a sample code you have availible to achive the horizantal view as display in the example card

type: custom:week-planner-card
days: 7
noCardBackground: true
eventBackground: rgba(0, 0, 0, 0.1)
updateInterval: 60
calendars:

• entity: calendar.gezin
  color: '#e6c229'
  texts:
  noEvents: Geen activiteiten
  fullDay: Hele dag
  today: Vandaag
  tomorrow: Morgen
  sunday: Zondag
  monday: Maandag
  tuesday: Dinsdag
  wednesday: Woensdag
  thursday: Donderdag
  friday: Vrijdag
  saturday: Zaterdag

Hide weekends

It should be possible to hide Saturdays and Sundays. If the starting day is set to yesterday, today or tomorrow and that's a Saturday or Sunday it should start with Monday

Weather forecast not working after update to 2024.4

The forecast attribute of the weather entity was deprecated in 2023.9 and has been removed in 2024.4. Now the weather forecast service should be used. See https://www.home-assistant.io/blog/2023/09/06/release-20239/#weather-forecast-service

Add click to display event details

Add a click to display event details in an overlay

Event background color

It would be really nice if you could style the entire event a certain color instead of just having a bar on the left.

Hide past due events

I really love this card. Thanks. I do miss one feature though, and that is an option to hide events for which the end time/date has passed.

Request: Option to display the month next to the day

It would be great to have the option to display the month of the date next to the day like shown in this screenshot:

Hide date number

It would be great if we could hide the date number. Usecase could be more rows with calendars for family-members to create a family planner with each family member their own row

Background Image/Theme

I cannot for the life of me get the background of this card to be anything other than white. I have tried both noCardBackground: false and noCardBackground: true. Is there something else I should be doing? I currently have it setup as Panel (1 card) view type so that there are 7 day columns.

When I click on the weather icon the weather more info popup should be displayed

Error handling when fetching calendar events

There is no error handling when fetching calendar events. This means the card won't show anything if there are any problems. A proper error message should be shown.

Request: Combine events

As a user with multiple calendars for each family member, I'd like to have events that match (presumably by title and times) to be collapsed into one entry with the calendar colours stacked so that I can reduce clutter.

E.g. this could be one entry with blue, pink, and purple lines on the left side:

Add to hacs repository

• Add hacs actions and check if they succeed
• Create PR to add this repository to hacs
• Wait for PR to be merged

See https://hacs.xyz/docs/publish/include/ for more information

adjust days for weather

Can we adjust how many days weather is shown? currently have it showing two rows of 5, so 10 days. Weather is shown for 6 of them, which means the weather is shown only on the first day of the second row. It's a tiny detail, but if it's an easy adjustment that would be great.

Have calendar start on first day of month

I'd like the calendar to start on the first day of the month and show the whole month. Essentially like the included calendar card but yours is much more customizable.

"hideDaysWithoutEvents" conflicts with "days" option

Description

Hello, I'm having trouble with displaying a certain number of days while also hiding/ignoring the days without any events.
Here is my config:

type: custom:week-planner-card
calendars:
  - entity: calendar.famille
    color: blue
days: 5
noCardBackground: true
hideDaysWithoutEvents: true
hidePastEvents: true
showLocation: true
compact: true

What is expected to happen:

Shows the next 5 days with events and hides the days without any event till 5 days are shown.

What actually happens:

Shows the days with events in the next 5 days and hides the one without any events, resulting in only 2 or 3 days showing.

Is there an option I'm not aware of that would fix this issue?

Add compact mode styling

Spacing on cards should be reduced for display on smaller screens

Release version 1.5

Heey,

What is the planned release date for version 1.5.0?
(HACS does not offer an update)

I see some features that I would like to use for my styling 😸

24 hour vs 12 hour for events

Maybe I missed it but is there a way to change the event times to 12 hour format with AM/PM?

Highlight today's date

Good day,
This is an awesome project, thank you! It would be beneficial if there were a way to make today's date BOLD, or CIRCLED, or possibly place a LINE underneath the date, or in any way different from the rest of the dates for easier overview.

Request: add a title to the card

Please add a configurable 'title' to the card.

I am using my calendar different than most, I have actually used the calendar 5 times, once for 'whole family' events, then a different card for each member of the family. Each card may have multiple ical calendars within it, but it is only relating to that person.

This is reimplementing the whiteboard we have beside the dinner table, but hopefully with less manual updates required!

It would be nice if each person's name appeared at the top of their card. A configurable title (similar to many other cards) would be great.

Thanks,

Show event location

It should be possible to show the event location directly in the overview. This should be configurable and off by default.

Ability to set Start Day for the week view

Hi, just wondering if its posible to set a specific start day for the view, so that it shows for example Sunday to Saturday as a fixed week instead of refreshing to Today being the first day?