DIY Family Calendar (Skylight)

Share your Projects! Dashboards & Frontend
22

Weird, not sure. Applying filters is pretty much immediate in my setup.

1 Like
23

I am running on a home assistant green so maybe that is part of the slowdown but after clicking a filter it takes several seconds to reload, the whole calendar goes away and then re appears. I am using outlook calendars instead of google, maybe a config difference?

24

Ah missed that step in my initial post. You need to add these helpers

25

Ah, that makes sense. Here’s an updated list of helpers folks will need to add:

Text:
“calendar_event_title”
“calendar_event_description”
“birthdays_calendar_filter”
“[PERSON]_calendar_filter”

Dropdown:
“calendar_select” (add your calendar options)
“calendar_view” (options: Today, Tomorrow, Week, Biweek, Month, Bimonth)

Datetime (Date):
“calendar_day_event_start”
“calendar_day_event_end”

Datetime (Time)
“calendar_event_start”
“calendar_event_end”

Toggle:
“calendar_all_day_event”

2 Likes
26

I haven’t tried what OP has posted yet. But if you don’t want to use google calendar for kid calendars, I built a way to use Local Calendar integration for kid calendars. It syncs parent calendars to child calendars via a custom component (and creating an automation). Read more at family calendar sync post I made. Cheers!

2 Likes
27

I just want to thank you again. I have the calendar up and my wife is loving it. I also have hass.agent working to turn off and on the monitor based on motion in the room the screen is in. My next step is task/chore charts for kids. I was looking into creating manual toggle helpers, or maybe looking into grocy. Did you have any helpful scripts or hints on your chore list dashboard? Thanks again.

28

Can you explain or give insight on how to acheive these steps?

3. Implementing Calendar Filters

Since the Week Planner Card doesn’t support hourly views, I implemented filtering via regular expressions (regex). Each entity could display all events (.* ) or no events (^$ ).

For each family member, I created an input_text helper ([person]_calendar_filter ) to dynamically control event visibility.

Then for each calendar, we need to create a script to show/hide events based on regex for a calendar:

29

This is very impressive work… in lieu of a formal writeup of chore tracking, would you mind just sharing the code?

30

I’ll try to get a writeup this weekend. It got complicated pretty fast but its working as we want it

1 Like
31

So, to be able to filter the calendars you need to use Regex (which is poweful but confusing and complicated). Pretty much all we are saying with those filters is show ALL items for the person’s calendar or NONE. Nothing in between.

So, just create the input_text helpers with the name [person]_calendar_filter and the automation will take care of the Regex switching it to show all or none every time you click on the button or call the automation

32

Thanks so much for building this. I’m getting kind of close but still have a few issues I’m hoping someone can help me with. I have the same number of names as the example but each name in the calendar header is way bigger than the example so the “Add Event” button goes off the right side. The toggles work, but Add Event doesn’t bring up a screen. Is browser mod required for that button to work? I don’t have it configured for this device so can if I need to, but I thought a button to show a popup is supported by HA natively.

Also looking forward to details on the chores screen. Thanks again!

33

Love it. Works great! just Implemented on my family wall dashboard. The only thing I don’t like. Is the sync time between homeassistant and google is about 10-15 minutes so it doesn’t show instantly.

34

Has this been thrown onto github yet? No rush of course! Just curious! Great work! I showed it to me wife and she said,“looks just as good as skylight!”

35

I love this idea/project. My wife keeps wanting one and I see lots of reviews making it sound like the actual Skylight hardware isn’t the best and is quite costly. Not to mention we already have many of the functions is HA already.

Edit: I’m working with the example code and for some reason card_mod isn’t working for the weekly planner card and I have no idea why.

image_2025-03-11_133008483
image_2025-03-11_1330084831526×712 52.5 KB

36

lovley work. just want the week-planner to look like yours but its a bit to advanced for me. hoping for a guide in the future!

37

did you get this to work, same problem here

38

I did not. I also haven’t worked on it in a while though. I need to get wife approval and buy some hardware next. I’m thinking 15+ inch touch screen in a picture frame. I might go with one deep enough I can also add an assist satellite inside.

39

Do you have card-mod and browser mod?
Make sure the browser is registered correctly, hopefully that does it

40

Is it possible to display a true month at a time, rather than just 30 days starting with today? And make it look like a true calendar?

41

Loving the idea of this but for the life of me I cannot get the view right, I am getting the below

image
image479×940 42.7 KB

Code for calendar below

type: custom:config-template-card
entities:
  - input_text.remy_calendar_filter_calendar_filter
  - input_select.calendar_view
variables:
  PERSONCAL: states['input_text.remy_calendar_filter_calendar_filter']?.state
  VIEW: states['input_select.calendar_view']?.state
  DAYS: |
    (() => {
      const calendarView = states['input_select.calendar_view']?.state;
      
      if (calendarView === 'Today') return 1;
      if (calendarView === 'Tomorrow') return 2;
      
      // Check for Month, Biweek, or Week based on screen width
      if (calendarView === 'Week') return 7;
      if (calendarView === 'Biweek') return 14;
      if (calendarView === 'Month') return 28;
      if (calendarView === 'Bimonth') return 56;
      
      // Default fallback to 7 if no condition matches
      return 7;
     })()
card:
  type: custom:week-planner-card
  calendars:
    - entity: calendar.remythfc_googlemail_com
      name: remy
      color: "#ffff"
      filter: ${ PERSONCAL }
  days: ${ DAYS }
  startingDayOffset: 0
  hideWeekend: false
  noCardBackground: false
  compact: false
  weather:
    showCondition: true
    showTemperature: true
    showLowTemperature: true
    useTwiceDaily: false
    entity: weather.forecast_home
  locale: en
  showLocation: true
  hidePastEvents: false
  hideDaysWithoutEvents: false
  hideTodayWithoutEvents: false
  combineSimilarEvents: true
  showLegend: false
  legendToggle: false
  texts:
    monday: Mon
    tuesday: Tue
    wednesday: Wed
    thursday: Thu
    friday: Fri
    saturday: Sat
    sunday: Sun
    yesterday: ""
    today: ""
    tomorrow: ""
  card_mod:
    style: |
      ha-card {
        .event.past {
          opacity: .2;
          background-color: gray !important;
        }
        .time {
          color: #333333 !important;
          font-size: 0.8em !important;
        }
        .event {
          color: #333333 !important;
          line-height: 16px !important;
          background-color: var(--border-color) !important;
          border-radius: 10px !important;
          max-height: 80px !important;
          overflow: hidden !important;
          font-size: 1.1em !important;
        }
        .none {
          background-color: transparent !important;
        }
        .today .number {
          border-radius: 5px;
          background-color: orange !important;
          padding-left: 4px;
          padding-right: 4px;
              
        }
        .day .date .text {
          font-size: 1em !important;
          font-weight: bold !important;
        }
        .day .date .number {
          font-weight: bold !important;
          font-size: 3em !important;
        }
        .day {
          --background-color: red;
          border: solid 1px whitesmoke;
          padding: 0.2%;
          width: 13% !important;
        }


              
      }