DIY Family Calendar (Skylight)

I would like to have events assigned to young children. Do I need to create a Google account just for them in order to have their events filterable?

oh i love all these ideas - unfortunately I got the same challenge as some others to actually bring it to work. I would even be fine with a little less functionality but a clean nice weekly matrix view of calenders with some good editing. basically a nice looking week view or even just outlook.

the closest I got (as none of the combined code sniplets here were sucessfull for me was the “week-planner-card” from FamousWolf already mentionned here. For shot time schedules I like the calendar card pro but thats just not fitting the picture for a weekly family plan. Did anyone except the OP manage to combine the code sniplets here to a nice working week planner?

“It would be super kind of you if you could send me the YAML code once — I’m really struggling with the code snippets.”

Did you ever put this project on Github? Thanks!

Hey everyone!
OP here. Its been crazy and havent had time to log in here to help you all or put things in Github or whatever.
I am trying to see if I can collab with one of the Youtube HASS channels that could help create a detailed step-by-step and potentially a repo from there.

4 Likes

Try out my post above – DIY Family Calendar (Skylight) - #54 by fgorodishter
The extras are outlined: DIY Family Calendar (Skylight) - #58 by fgorodishter

I figured out that you create sub-calendars within your Google account so no need to create their own accounts.

1 Like

yes, having this as a repo would be amazing

First, thanks for this project! I’d love to build this for my wife, who has been bringing up the Skylight for months now. Quick question, apologies if I missed it in the thread — is it possible to run this on a tablet? I have an extra RPi4 I could put to use. But counter space is limited in our kitchen, and I can see a cleanly wall-mounted tablet being more appealing to her long term.
If it can, but it’s not ideal, why not?

Yeah. Its not responsive so you might need to build another version formatted for tablet. For example I created another view for my phone that has the same info and functionality. In this one for example I changed the calendar to show 1 day per row when on a phone. For tablet you might be able to play with the number of days and the style to make it fit what you want

Great! I think I can manage that. Thanks!

Just wanted to say thanks for this project, I started with google integration but now I’m just using the HA calendar in the background. I changed a few things with styling and the event pop-up, also kept the rows to be Monday to Sunday unless you choose less than 7 days.


The layout looks a little weird because its designed for a tablet.

3 Likes

Looks nice! You should put yours in a github repo or write up how you made yours. The more guides out there, the more it helps the community.

1 Like

Looks nice, can you please share your code?

1 Like

How did you get the rows to be Monday to Sunday?

Thanks, I’ll see what I can do, but I’m still quite new to this.

There’s probably a better way of doing this, but I’m still new to it.
I created a new variable ‘STARTDAY’ and as you can see I copied the code
to calculate number of DAYS to show. Then it sets STARTDAY as either today
or monday ( or whichever day you want to start your week)
Then further down below days: ${ DAYS } add startingDay: ${ STARTDAY }

        DAYS: |
            (() => {
              const calendarView = states['input_select.calendar_view']?.state;

              if (calendarView === 'Today') return 1;
              if (calendarView === 'Tomorrow') return 2;
              if (calendarView === 'Overmorrow') return 3;

              // 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 28;
            })()
          STARTDAY: |
            (() => {
              const calendarView = states['input_select.calendar_view']?.state;
              if (calendarView === 'Today') return 'today';
              if (calendarView === 'Tomorrow') return 'today';
              if (calendarView === 'Overmorrow') return 'today';
              
              // Check for Month, Biweek, or Week based on screen width
              if (calendarView === 'Week') return 'monday';
              if (calendarView === 'Biweek') return 'monday';
              if (calendarView === 'Month') return 'monday';
              if (calendarView === 'Bimonth') return 'monday';
              
              // Default fallback to 7 if no condition matches
              return 'monday';
            })()
        ..........//.............
          days: ${ DAYS }
          startingDay: ${ STARTDAY }

Hope that helps.

Hello,
First thanks for the great work! I have manager to configure the calendar part and it is really slick.
I’m a complete beginner in HA (literally installed it a couple of days ago) so I could really use your help for the next part. Indeed my partner ask for a skyligth too so that is how I ended up here. I just miss the task and routine part to have it completed.
I have installed Grocy and some add on. But would it be possible for ypu to share with me the configuration of your task board and/or explain how to do it?
Thanks a lot!

I have had moderate success with setting this up. I am still trying to set up the person bubble cards to toggle what calendar events show up in the week planner card. I can get it to work, but as soon as I wrap the week planner card in the custom-config-card to enable the entities and variables it seems to limit the week planner to only 1 column width so I can’t view the calendar across the entire screen.

Take what I’m gonna say with a grain of salt as I’m a newbie but I solved it by putting the calendar in an horizontal stack by itself. Then you can set the width you want including the full width.