DIY Family Calendar (Skylight)

Please do share, the not able to edit/delete it is a bug bear that we love with but would be nice to fix

Look into Wallpanel extension, allows you to hide different aspects of the page

Im uploading to github now. just testing to make sure github will work same as my local code but the way this works is we dont even need the “add event” button anymore you simply click day and add, edit or delete event. I also made it responsive too

2 Likes

what would be proper way to share 2 new repos that fix a couple issues with this wonderful project?
here is link to thread for brave soles to test :slight_smile:

Really would love to start using tis too, I now have a Samsung Galaxy Tab A9+ on my wall, but thats to small for being a family calendar, so i’m looking for something like the OP is using ( HP Engage 16t FHD). Unfortunately, I cannot seem to buy this anywhere. What are you guys using as an alternative?

Amazon does have a few touchscreens, but none I can find with Webcam / speakers see: UPERFECT 18,5 Inch 120Hz Touchscreen Draagbare Monitor FHD 1080P Oogverzorging Scherm met Geïntegreerde Beugel USB C Mini HDMI voor PC Laptop Xbo Switch, Metalen Behuizing, VESA-compatibel : Amazon.nl: Elektronica

Try here: https://community.home-assistant.io/t/the-perfect-walltablet-for-ha/972488.

1 Like

I’m just using 11” tablet for testing and works fine, but agreed bigger would be better

I’m going to ttest on a smaller screen indeed, but in the end i’d like to put a 24" on the wall. The goal is to replace a big magnetic board and a 11, or even 15" seems small.

I found an 32" on Ali too, but that’s just a monitor. Now I have an Pi4 laying around so maybe I could install Android on it, but then i’m not 100% sure the touch screen works.

The link above shows really cool devices, and pretty much all i want from a device except the screensize. That’s just a bit to small. Nevertheless, thanks for showing the image of an 11", does look okay.

Is there a video out there somewhere how to set this up and then go through all the features?

I got a sm-T670 with 18.4” screen for $150 installed lineage OS on it and works great. I got one in black and one in white for my daughters house.picture with altoids box for scale


1 Like

Awesome, really nice work…Wife must be proud

Nice device! Can’t find it anywhere to buy. I found 24” touch but don’t know if these are supported by default with installation of android on pi4. Bit of a gamble to just buy tbh.

Which Android OS version is this? Or more importantly, which WebView or WebView2 version? I mean, Google say it was announced in 2015… so does it run everything you want it to run?

I installed custom os (Lineage 15.1)so it’s running current web view and yes it works fine for everything. front camera not working with lineageos but thats not a huge deal and i think i could get it working if i wanted to.

You can buy a used mini pc cheaper than a pi4 with touch support. I have a 24 touch monitor running linux Mint for the dashboard.

would anyone be interested in a new “schedule View”?

3 Likes

That looks great, so yeah

This would require my week-planner-card-plus integration to get new view. Using the “plus” card also allows you to add/edit/delete events just by clicking them or clicking a blank day to add new event.

To get new view you must add it to your family_calendar.yaml:

  # The View selector (Week, Month, etc)
  calendar_view:
    name: Calendar View
    options:
      - Today
      - Tomorrow
      - Schedule
      - Week
      - Biweek
      - Month
    initial: Week

Or your calendar_view helper manually just add “Schedule” if you setup manually.

mod your dashboard.yaml “VIEW: states:”

VIEW: states['input_select.calendar_view']?.state
              
              VIEWMODE: |
                (() => {
                  const v = states['input_select.calendar_view']?.state || '';
                  const w = window.innerWidth;
              
                  if (v === 'Schedule') return (w >= 1100) ? 'timeGridWeek' : 'timeGridDay';
                  return 'grid';
                })()
              
              DAYS: |
                (() => {
                  const v = states['input_select.calendar_view']?.state || '';
                  const w = window.innerWidth;
              
                  if (v === 'Schedule') return (w >= 1920) ? 7 : (w >= 1100) ? 3 : 1;
              
                  // keep your existing view logic
                  if (w >= 390 && w <= 500) return 1;
                  if (v === 'Today') return 1;
                  if (v === 'Tomorrow') return 2;
                  if (v === 'Bimonth' && w >= 1920) return 56;
                  if (v === 'Month' && w >= 1920) return 28;
                  if (v === 'Biweek' && w >= 1920) return 14;
                  if (v === 'Week' && w >= 1920) return 7;
                  return 3;
                })()

and for style this is my current card_mod style:

              card_mod:
                style: |
                  ha-card {
                    background: rgba(255, 255, 255, 0.6) !important;
                    border-radius: 24px;
                    box-shadow: none;
              
                    .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 { border: solid 1px whitesmoke; padding: 0.2%; width: 13% !important; }
                  }
              
                  /* ===== Schedule view ONLY: force black text on pills (all-day + hours) ===== */
                  .timelineAllDayPill,
                  .timelineAllDayPill * {
                    color: #111 !important;
                  }
              
                  .timelineEvent,
                  .timelineEvent * {
                    color: #111 !important;
                  }
              
                  /* If you want the time line slightly dimmer than the title */
                  .timelineEvent .time,
                  .timelineAllDayPill .time {
                    color: rgba(0,0,0,0.70) !important;
                  }
                  /* All-day pills wrap inside the day column (no bleed to next day) */
                  .timelineAllDayPill {
                    white-space: normal !important;
                    overflow: hidden !important;
                    text-overflow: ellipsis !important;
                    overflow-wrap: anywhere !important;
                    word-break: break-word !important;
                    max-width: 100% !important;
                    box-sizing: border-box !important;
                  }

            grid_options:
              columns: 120
              rows: 1
              showDescription: false

All the rest of documentation you might need is in my repo

4 Likes

Thank you, that is great!
I have some issues:

  • dark mode: readability ist not good in “schedule View”.
    I would like to modify day numer and name as in week view and a different background
  • Would it be possible to make the view more condensed?
    Or focus on the day time hours?
  • I use caldav calendars from apple.
    creating new entries works but deleting does not. (gives an error)
    Is that a limitation on apples side or maybe a bug calendar tools?

caldav should delete just fine did you also install Ics calendar tools(is only for local calendars but might make it work(error go away)… what error do you get)) can you edit event? Edit may not work that might be same limitation as Google integration but I will check. Most styling you mention can be done in css I would think.

I will test delete on caldav and if it’s a issue with my card I will fix if it’s a caldav limitation in HA I may not be able to fix that issue