DIY Family Calendar (Skylight)

Share your Projects! Dashboards & Frontend
190

You can use 1 Google Calendar, but create calendars in that calendar.
If course, if you have wife/kids with their own calendar, you could also sync this with them.
But creating multiple calendars in that 1 Google account works fine, you can share each calendar to every member and out will appear in their calendars as well.

@ernie3491
Yeah it works fine. His code in first message is a bit strange and i edit it a little, so it clears every every you make after it created an event.
Also created my own popup.

191

Its been 9 months can we please get a github repo of this? I’m having a lot of trouble getting the filters and creating events to work

2 Likes
192

Forgive me if this is a stupid question: In the “Why DIY” section you specify " * Flexible Placement – Can be moved around the house instead of a fixed wall mount. Including the “must” countertop option."

Unless I’m missing something, the monitor is not wireless and doesn’t have a battery; and you don’t mention a battery for the MiniPC. When you say “can be moved around the house” are you just shutting down, plugging it in somewhere else, and powering back up; or is the whole setup portable in a way I’m not understanding?

Thanks so much for taking the time to write all this out. I got here from my fiancee wanting a Skylight and me assuring her we didn’t need a thousand dollar proprietary subscription machine. Now I’m learning all about HA instead, haha.

Cheers!

193

How did you get the calendar to show the options to show different months
← Today → november ?

194

Good point. I guess the initial thought on flexible placement was that it could be unplugged and replugged somewhere else instead of setting it and keeping it in the same spot; also this made it possible to have the dashboard in a tablet or any other portable device vs skylight that requires their spoecific hardware.

1 Like
195

wish granted

3 Likes
196

Sorry about the initial language. Hopefully the LLM generated description and steps available in the github repo make more sense

197

That’s a week-planner-card config. As far as I understand you can achieve by adding this parameter to the week-planner-card

startingDay: sunday

198

Worked ok for initial setup, made sense because it was highly discounted when I bought it and it was way cheaper than any other alternative.

Recommendations depend on what you want and need. If I were starting today I’d probably go for a cheap tablet

199

That’s an option in week-planner-card:
showNavigation: true

By default it looks different, so I changed the style with cardmod.
This is my card mod for the weekplanner:

                style: >
                  .today .number { border-radius: 10px; padding: 2px;
                  background-color: orange; } .inner { border-radius: 0px 10px
                  10px 0px; background-color: color-mix(in srgb,
                  var(--border-color), transparent 80%); } .navigation {
                    align-items: center;
                  } .header {
                    display: flex;
                    flex-direction: column-reverse;
                  } .legend {
                    display: flex;
                  } .legend ul {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 0em;
                    list-style: none;
                    padding: 0;
                    margin: 0;
                    justify-content: center;
                  } .legend li {
                    cursor: pointer;
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    padding: 6px 12px;
                    border-radius: 999px;
                    font-weight: 500;
                    font-size: 1.2em;
                    background-color: var(--legend-calendar-color);
                    color: var(--primary-text-color);
                    transition: background-color 0.2s ease;
                  } .legend li:hover {
                    background-color: color-mix(in srgb, var(--legend-calendar-color) 85%, white);
                  } .legend li::before {
                      display: none !important;
                      content: none !important;
                  } .navigation ul {
                    display: flex !important;
                    align-items: center !important;
                    gap: 1em !important;
                  } .navigation ul li {
                    vertical-align: middle;
                    align-items: center;
                  } .navigation ul li:nth-child(2) ha-icon {
                    display: none !important;
                  } .navigation ul li:nth-child(2)::before {
                    content: "Today";
                    font-weight: 600;
                    font-size: 1.5em;
                    vertical-align: middle;
                  }  .navigation ha-icon {
                    display: inline-flex !important;
                    align-items: center;
                    justify-content: center;
                    vertical-align: middle;
                  }
200

cool! But imo you have to redo some stuff. Like your buttons to show/hide calendar items of a person are now integrated into the week planner card in the legend.

201

@mohesles1 sorry if I’m missing this somewhere, but how did you create that gorgeous floor plan?!

Thank you for all the hard work on this!

202

I built it on Homestyler.
I don’t do dynamic lighting for the floorplan, that part is a bit complicated to do with this tool. However, I found this one to be pretty good, has a good library of funriture where I can find something at least similar to what I own, or even change textures of specific pieces. Has a bit of a learning curve tbh, but I am very satisfied. I even created pictures of the rooms “from inside” and it looks like the real thing. Pretty crazy
https://3d.homestyler.com/

203

Yeah, that functionality has been there for some time, but if I remember correctly the reasons why I went a different route were:

  • To have the filter available to be used somewhere else (I think the legend does not get exposed as an entity or attribute)
  • Styling: To keep the feel as similar as possible to the skylight calendar it was easier to add the buttons than to thinker and mess with the legend values. Also consistency. We use the same colors and user pictures everywhere so its easier for the kids.

But yes you’re right that is another option, its just personal choice. It should be easy to adjust the code to remove the buttons if you want to

EDIT:
Here is a CSS to get you started if you want to replicate the view in the legend. Its not 100%, so its a starting point and you’ll need a few more mods in case someone is interested.
In my case, I need the functionality as originally developed, so feel free to fork the repo and add/change there if you want to go down this path
Note you need to do this for each calendar

card_mod:
  style: |
    /* --- Item 1 (Alice) --- */
    .legend ul li:nth-of-type(1) {
      /* 1. Sizing */
      width: 10vw !important;
      min-width: 160px !important; 
      
      /* 2. Background of legend item*/
      background-color: #fb8072 !important;   
      border-radius: 50px !important;
      padding: 5px !important;
      margin-bottom: 5px;

      /* 3. Layout */
      display: flex !important;
      align-items: center !important;      /* Vertical align center*/
      justify-content: flex-start !important; /*Horizontal align left*/
      
      /* 4. Text Styling */
      color: white !important;
      font-weight: bold !important;
      font-size: 18px !important;
    }

    /* Hide the original icon */
    .legend ul li:nth-of-type(1) ha-icon {
      display: none;
    }

    /* add picture */
    .legend ul li:nth-of-type(1)::before {
      content: '';
      background-image: url("{{ state_attr('person.alice', 'entity_picture') }}");
      background-size: cover;
      background-position: center;
      
      /* Image (icon) background */
      border: 3px solid white !important; 
      background-color: white !important;
      
      display: block;
      width: 45px !important;
      height: 45px !important;
      border-radius: 50%;
      
      margin-right: 12px;
      flex-shrink: 0;
    }
204

Thanks for posting - this looks like a great alternative to buying a skylight device, and probably a lot more options to customize.

One question I had is on editing/deleting the events from this dashboard. In the builtin home assistant calendar, events (at least the ones with the local calendar) can be clicked and have the option to edit or delete:

image
image269×120 4.48 KB

But when the events are clicked from this dashboard, there are no edit or delete options. There appears to be no call service option for these that I can see to add. Any ideas how to add those options for edit and delete when events are clicked in this dashboard?

image
image167×131 1.45 KB

205

This is awesome but tried to follow your step by step in the GitHub post but ran into 2 issues

  1. there’s no homeassistant: in my configurration.yaml. I tried to create it with the packages line but get error “patternWarning”

  2. When trying to paste the dashboard.yaml into the editor I get “Unable to parse YAML: YAMLException: bad indentation of a mapping entry (3:3) 1 | views: 2 | - title: Home 3 | type: sections -------^ 4 | max_columns: 10 5 | title: Family Calendar”

Any help with these issues? I’m a beginner when it comes to yaml :frowning:

206

When you create a new dashboard, click the edit button, then the 3dot menu and choose Raw Configuration Editor.
That is where you paste that full yaml.

207

That’s what I did but didn’t work >_<. What you have in your github is everything that would be needed in the dashboard? I don’t have an option anymore to create a section dashboard unless I missed it.

208

Does your YAML for the newly created Dashboard still have views: at the very top before you paste the YAML provided? You need to maintain this for the provided code to work. If you look at your main dashboard’s YAML you should see this formatting present. I hope this helps!

209

Sounds like an issue with indentation. Make sure youre pasting at the right level.
In your dashboard, click on edit (pencil), then you shuld be able to see the views (tabs below the title). You want to paste the code at this level, so click add, or edit to open the “View configuration” popup; click the 3 dots at the top right, select edit in yaml and paste it at this level