Skylight Calendar Card — A family-friendly schedule card

Share your Projects! Dashboards & Frontend
42

I would like to colorize the background on weekend days.
I have the workday calendar to identify a day on the weekend if there is no event on that day.
Or is there a better way to do that?

43

So you’re looking for something like (note the exclamation point)

day_styles:
  - condition: !has_event
    calendar: calendar.work

That doesn’t work yet, but, it could. Let me look into it.

1 Like
44

Hi,

Firstly, this is probably the quickest and easiest calendar deployment I’ve used to date. Super slick. Id been using the week-planner-card and the modified week-planner-card-plus. Both are great and I had the calendar as I wanted. But I like the fact that this one allows edits not just add/delete.

One thing I wanted to check though is related to “Tasks”.

If I go onto my phone, add something to my google calendar I have options:

  1. Event
  2. Birthday
  3. Tasks

When I add a task it appears on my other calendar dashboards. But this one it doesnt seem to display them. Is there a setting or have tasks not been integrated yet?

Just to be clear Im not refering to “Google Tasks” from the google tasks app.

Hope this makes sense.

45

@Fugazzy

See Support negated day_styles condition `!has_event` by superdingo101 · Pull Request #245 · superdingo101/skylight-calendar-card · GitHub, this should now work:

day_styles:
  - condition: "!has_event"
    calendar: calendar.work
1 Like
46

Can you please confirm that tasks created from the Google app/website actually show up in Home Assistant under the native calendar display? That doesn’t actually happen for me. I can’t get them into HA at all, and if they aren’t in HA I can’t get them to display in the calendar app.

47

I think I might have to retract this statement. It was working on a previous calendar in HA.

i’ve just gone to inspect and test it, and the tasks dont appear to be disaplying in that one now either. I have made some changes so I’ve either broken it, or im smoking something :stuck_out_tongue_winking_eye:

48

This is awesome!!! I was trying to dial this all in via yaml, was so excited when I found the card. Great work!! Looking for advice, I have calendar icons working on all devices showing users faces except for one device. Flat network, no VLAN or firewall rules. THe device is an Elo Touch 22" monitor android version, I’ve tried the home assistant app, and a browser itself with no luck. Instead of faces showing, it shows a broken photo image like it cant find a picture or bad jpg. Like I mentioned, all other devices (android phones, and windows PCs) works great. Thank you again for your work and if anyone has something for me to try, please let me know.

49

@Drumsbh
Thanks for the kind words! Here are some things to check:

  • What is the image format? Try swapping faces for simpler icons first, then a stock/simple jpeg/png
  • Are photos fetched from the cloud? If on HA, are they fetched from local IP address or from a public/reverse-proxied network address? Simplify the setup first

Here are some things you can also try:

  • Try to open the same image URL directly on Elo (long-press/copy from browser dev logs if possible)
  • Convert the image format to jpeg/png
  • Clear the cache on the device
  • Try a different browser on the device (Chrome vs Firefox vs etc)
51

@superdingo101

I am able to open the pictures when going to the full URL path in a browser on the Elo. I’ve tried using the home assistant app, and a chrome browser on the elo. Same issue.

Results from me adding the following to the Calendar Badge Icon settings:
I tried using the /media/local/ folder but received this error on all devices.
"Logger: homeassistant.components.http.ban
Source: components/http/ban.py:140
integration: HTTP (documentation, issues)
First occurred: 6:50:40 PM (12 occurrences)
Last logged: 6:56:00 PM

Login attempt or request with invalid authentication from 192.168.2.22 (192.168.2.22). Requested URL: ‘/media/local/download.png’. (Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36)

Works on other devices when I use URL: http://homeassistant.local:8123/local/download.png. This uses the /config/www/ directory, from my researching it doesn’t need to auth to view contents.

What does work on all devices is using the mdi:random built in icons. So I know Elo is talking. I’m a novice at this home assistant goodness, it’s possible I didnt set perms or allow rights somewhere.
Again, thank you your reply and great work. End of the day my Wife is happy which makes me happy. haha.

52

Out of curiosity is there a way to make the mdi icons on the calendar filters black? I have pictures on the people but for things like “Reminders”, “Occaisions”, “Family” I use mdi icons, but the colours on the backgrounds are quite light colours so the mdi icons being white are not as clear.

… hope that makes sense.

I thought of using mod_card but it doesnt seem to work. I’ve been trying to apply
card_mod:
style: |
ha-state-icon {
color: black;
}

But to no avail.

Any support is appreciated. Thanks

53

@husbspamuel what is hosting your pictures? Is it local on HA?

54

For the pictures of family members they are .png files located locally on the HA pi5. They are fine. Its the local mdi icons that I am trying to control the state of.

Worst case I’ll make a black version of the mdi file and host them as .png and just put the location to that file

55

@superdingo101 I got mine all fixed up!!! Looks stellar. I had to hard code in the IP instead of the hostname. Guessing a DNS issue on the Elo device even though it should be looking at the router for DNS. Since the HA is a static IP on the network I’m fine with this. Thanks again!!

Example for others if having the same issue: //192.168.2.102:8123/local/download.png

56

@Drumsbh That’s wonderful news! I’m glad you got it sorted out!

57

@husbspamuel See Allow customizing calendar badge icon color with CSS variable by superdingo101 · Pull Request #260 · superdingo101/skylight-calendar-card · GitHub. This will be possible when included in the next release.

This will work with UIX via:

uix:
  style: |
    .calendar-badge-icon {
      --skylight-calendar-filter-icon-color: #000000;
    }
58

Oh thats brilliant, I’ll look forward to the next release. I’ll add this code in ready :slight_smile:

Great work!! Thanks for the ongoing maintenance of this card, its awesome

59

Hi,

The calendar filters go ever so slightly over the width of my screen, so there is a scroll bar for the sake of a few mm.

I was looking for a way to change the padding in the filters, so it would condense them slightly more but couldnt figure it out. Would this ability to modify via css/padding be coming in the next release as well?

On a related note, I have managed to get around this at present by setting the header to compact. Is it possible to have the choice to swap the compact header though so the filters are below the rest of the navigation. Its trivial really, so dont worry if not.

Thanks again!

60

You can do that now:

uix:
  style: |
    .calendar-badge {
      padding-top: 4px;
      padding-bottom: 4px;
    }

Just use padding: if you want the same value all round or add padding-left: and padding-right: to those above to have complete control over all four sides.

61

Ah i misunderstood the previous post. I thought it meant UIX was being released as a complete feature on the next release. But superdingo meant the icon colour feature within UIX is being released.

Thanks for confirming this!

62

UIX is the new version Card Mod.