Family calendar

Did you succeed ? Looking for the same thing…

Solved my own after trying a few things. So here is the process in case someone wants to show/hide calendars from an external button (similar to what the legend does).

  1. Create an input text helper with default value .* (input_text.holiday_calendar_filter)

  2. Created a script that will toggle the values of .* and $^ to filter none or filter all events in the calendar:

  - data:
      entity_id: input_text.holidays_calendar_filter
      value: |
        {% if is_state('input_text.holidays_calendar_filter', '.*') %}
          ^$
        {% else %}
          .*
        {% endif %}
    action: input_text.set_value
alias: Holidays Calendar Visible Filter
description: ""
  1. I used a bubble card button.
  - type: custom:bubble-card
    card_type: button
    button_type: name
    name: Holidays
    icon: mdi:bag-personal
    scrolling_effect: false
    show_icon: true
    show_name: true
    show_state: false
    tap_action:
      action: perform-action
      perform_action: script.holidays_calendar_visible_filter
      target: {}
    button_action:
      tap_action:
        action: perform-action
        perform_action: script.holidays_calendar_visible_filter
        target: {}
  1. Using config template card I apply the regex as the filter. Unfortunately this means no GUI configuration for the calendar.
entities:
  - input_text.holidays_calendar_filter
variables:
  HOLCAL: states['input_text.holidays_calendar_filter']?.state
card:
  type: custom:week-planner-card
  calendars:
    - entity: calendar.holidays_in_united_states
      name: Holidays
      color: "#ff7f00"
      filter: ${ HOLCAL }

Was This ever added? I really want to always show a full month view no matter what day it is today, maybe with today highlighted.

However I cant find any way to do this, Is there a way to start the month on the 1st and display the whole month regardless if the 1st day has passed and it is the 6th or whatever?

//Edit Found it in the closed issues on GitHub, it was added but its not obvious how you do this.

To do a full month starting on 1 and ending on last day of month you need to type in “month” for the total days under “days” .

Now the tricky part is you also need to type in “month” for starting day which is a drop down and doesn’t include this or allow you to type it.

You will need to edit this to “month” in the code editor as below :

days: month

I would ask there is a more obvious setting added to the gui for this view in future.

Thank you for posting this! I was literally searching for the same thing. My issue is that I always want the page to look like a calendar with Sunday being the first day of the week. I feel like the solution you posted above will not allow that since “month” makes the first day of the week be today.

Ugh.

All i want is a calendar card to show the entire month with sunday being the first day. Imagine you were looking at a printed calendar on a wall. That’s what I am hoping for someday with this card. It is AMAZING otherwise!

Finally got my pi and imaged with HA.
I’ve got it on the local network and have been playing about with some very basic dashboard concepts along with integration with Google Calendar.

However I now want to look at these custom dashboards for the family planners.
There are a lot of examples in this thread which show solutions at a code level.

Where do you save this code. I’m assuming its not as easy as doing it from the gui. I’m expecting some level of cli involvement. But a few articles I read reference different cli directories for saving these scripts.

Any pointers for a newbie or even reference to good newbie guides would be appreciated.

Thanks in advance

Hi, the card code has to be added to your dashboard.
Additionally, there is YAML code in this thread for automations (or scripts) which can also be used/added in the webUI

Hi,

Could you elaborate a bit more. The article i found has a github repo on it. The step stats to install the file into the config/www folder

But I cant find this folder.

This was the article/github i was trying to follow for more context.

Thanks in advance

Which article?
The first post, which is about this calendar, refers to GH where all is explained.
If I scroll a few posts up, there are some cards as well and those are installed the way I mentioned in my previous post and the other YAML code is for automations.

None of that needs access to your file system but if you want do that: the keywords are Samba or SSH access to your system.

Sorry thought I’d copy/pasted the link

You’re right, now I see it, sorry.

Well, like I wrote: you need to add Samba or SSH to your HA to be able to copy this to it’s filesystem.

Which type of HA setup are you running?

tried it with chatgpt but no chance :confused:

I’m running the main OS, on a raspberry pi 5. So no docker container or stripped down version. Hopefully that makes sense.

If I use the cli directly my display shows the ASCII art HA banner with a green ha> prompt

If I type “login” it takes me into the main shell

But when I try to type in “cd /config” it cant find the directory ← This is suggested on most posts I found

I can find a “config” folder in other directories but there are 2 or 3 of them, so its knowing which is the right one I think.
But then none of them have a “/www” sub folder so I’m guessing I would then have to do a “mkdir www” or something

In the Add-ons (sidebar → settings) you can search for SSH or Samba.
With Samba you can just use your file manager from your OS or with SSH and for instance WinSCP (on windows) to transfer those files.

Thanks for confirming this. I assume I could have used nano or viz in linux as well. That said a drag and drop function is easier anyway :slight_smile:

The next challenge I have is, that it suggest placing the file into “/config/www” but I dont have this anywhere.

There seem to be many posts confirming different locations for it. But I think because this is the raw HA OS on a pi (no container) that most posts reference
“/mnt/data/supervisor/homeassistant/config”

But I dont have the config directory and therefore obviously not the /www either

Do I just create this final folder structure, or is it actually a different path?

Thanks for your help so far

If you go to Sidebar → System → Repairs → 3 dots top right hand → System information, you can see where your configuration is stored.
That is the config dir mentioned above.

For the js file, you could use wget I guess as well and you can use the UI in Settings → Dashboards → Resources to add a reference to the js file.

Yeah I did look at the system information and all it shows is “/config” which doesnt give me a full path. Its odd.

I’ve run some integrity checks to make sure its installed correctly and imaged correctly and everything comes back fine.

I actually just tried a clean install again, but this time mounting a new ssd card on a m2.5 hat board. Its the same issue again though.

These things are normally something daft, but cant believe how much effort its taken to find this directory :crazy_face:

If I add a reference to the js how do I then view the new template is it just:
Http://homeassistant.local:8123/[filename.js]

Just checked it on HAOS (I’m running Core and that’s why it was showing the config directory in System information), /homeassistant == /config

So my banner says:

OS Version: Home Assistant OS 14.2
Home Assistant Core: landingpage

If I go through “system–>repairs–>” It shows me the following:

Version core-2025.2.0
Installation type Home Assistant OS
Development false
Supervisor true
Docker true
User root
Virtual environment false
Python version 3.13.1
Operating system family Linux
Operating system version 6.6.62-haos-raspi
CPU architecture aarch64
Timezone Europe/London
Configuration directory /config

I’ll probably give up and use the samba approach that you mentioned above, see if that gives me better success.

However because its bugging me, what if I just create a “/config/www” folder within /mnt/data/supervisor/homeassistant

If I put the .js file in there what would be the url from my laptop to view this would it be http://homeassistant.local:8123/local/filename.js

Thanks again

For anyone who needs this, I thought I’d share: I needed to color events based on their contents/title as opposed to which calendar they originate from. Use case: a calendar that shows pick-up dates for waste and waste recycling containers. Each of these containers has a distinct color, and I wanted to link that color to the relevant pickup day.

So if you have a calendar with recurring events, that always have the same title, and you want to color these based on their title; here’s how to do that with card_mod:

(just change the contents of the data-summary selector to fit your event titles)


card_mod:
  style: |
    .event[data-summary="Restafval"] {
      --divider-color: #555;
    }
    .event[data-summary="Papier"] {
      --divider-color: #03a9f4;
    }
    .event[data-summary="PMD"] {
      --divider-color: orange;
    }
    .event[data-summary="GFT"] {
      --divider-color: #0B0;
    }
1 Like