Family calendar

Share your Projects! Dashboards & Frontend
1

I am working on a family calendar, combining 3 Google calendars (my wife’s, my son’s and mine) in 1 display to show upcoming events for the next 2 weeks. After checking out several calendar cards, none of which did what I wanted, I decided to create my own. After working on it for a few evenings I’m pretty happy with the results.

family_calendar
family_calendar1920×1014 101 KB

I’ve made the card available for anyone who’s interested in trying it out: GitHub - FamousWolf/week-planner-card: Custom Home Assistant card displaying a responsive overview or multiple days with events from one of multiple calendars. Install and configuration options are in the README.md documentation. Any feedback or improvements are appreciated.

27 Likes
2

Really nice ! Have been looking for something like that quite some time.
I’ll give it a try…thanks man!

3

Looks neat!

Could u post an example config code? :grin:

2 Likes
4

For this view I’m using a single card view, with the custom bootstrap-grid-card and digital clock cards and card_mod for fine tuning the styles, with the following config code:

type: custom:bootstrap-grid-card
class: container-fluid g-0
cards:
  - type: row
    class: row
    cards:
      - type: custom:digital-clock
        class: col-xl-9 col-lg-7 col-xs-12
        timeFormat: HH:mm:ss
        dateFormat: cccc d LLLL y
        card_mod:
          style: |
            ha-card {
              text-align: left !important;
              background-color: transparent !important;
              border: none !important;
              padding-left: 15px !important;
            }
            .first-line {
              font-size: 500% !important;
              font-weight: normal;
            }
            .second-line {
              font-size: 200% !important;
              font-weight: normal;
            }
      - type: weather-forecast
        class: col-xl-3 col-lg-5 col-xs-12
        entity: weather.buienradar
        forecast_type: daily
        card_mod:
          style: |
            ha-card {
              background-color: rgba(0, 0, 0, .75) !important;
              border: none !important;
              margin-top: 15px;
              margin-right: 15px;
            }
  - type: row
    class: row
    cards:
      - type: custom:week-planner-card
        class: col-12
        calendars:
          - entity: calendar.calender_1
            color: '#e6c229'
          - entity: calendar.calendar_2
            color: '#1a8fe3'
          - entity: calendar.calendar_3
            color: '#d11149'
        days: 14
        noCardBackground: true
        eventBackground: rgba(0, 0, 0, .75)
        card_mod:
          style: |
            ha-card {
              margin-top: 50px;
            }
2 Likes
5

Ok this is quite awesome I have to say as I like how you can color coordinate the calendar stuff.

Can someone remind me how to add a background pic just to this view config?

6

is it possible to add events by touching the date? this could be a nice feature when its on the wall

1 Like
7

Loved it.

I will test it in a few days, maybe if you could do a translation file so I could translate it to pt-BR.

Thanks!

8

Great work, congratulations! I was looking up to this calendar design for month.
I was right before giving up searching.

One question: How can I change the Text like “Today”? I tried but it was not working. I would like to translate it.
Thank you.

9

is it possible to add events by touching the date? this could be a nice feature when its on the wall

That would be a nice addition, but I don’t think Home Assistant has a functionality for that. I’m just using the Home Assistant API to fetch the events. For creating events I’d need to send them directly to the source, which could be a lot of different things.

10

The texts can be altered through the configuration. I have it in Dutch in my configuration:

type: custom:week-planner-card
calendars:
  - entity: calendar.calender_1
    color: '#e6c229'
  - entity: calendar.calendar_2
    color: '#1a8fe3'
days: 14
noCardBackground: true
eventBackground: rgba(0, 0, 0, .75)
texts:
  noEvents: Geen activiteiten
  fullDay: Hele dag
  today: Vandaag
  sunday: Zondag
  monday: Maandag
  tuesday: Dinsdag
  wednesday: Woensdag
  thursday: Donderdag
  friday: Vrijdag
  saturday: Zaterdag
  tomorrow: Morgen

See the documentation week-planner-card/README.md at main · FamousWolf/week-planner-card · GitHub

1 Like
11

See my comment above :slight_smile:

12

Fantastic, I didnt see that, thanks!

13

lovelace-digital-clock

Hello, can anyone tell me how to display the Lovelace digital clock on my dashboard? I can’t find any instructions on how to install it or how to insert it, thanks :smiley:

14

I found it…

HACS > Integrations > Frontend > EXPLORE & DOWNLOAD REPOSITORIES

Then search for “digital clock”. Install it and restart HA - it will become available as a card to be added to your dashboard

15

I’ve just released version 1.1.0. This release introduces optional weather forecast information displayed at the top of each day, an event details popup when clicking on an event, localization for day names using Luxon and several small improvements. GitHub - FamousWolf/week-planner-card: Custom Home Assistant card displaying a responsive overview or multiple days with events from one of multiple calendars

week-planner-weather
week-planner-weather1920×345 48.1 KB

week-planner-details-popup
week-planner-details-popup1174×1334 262 KB

1 Like
16

IM building my own here and make it more “cleaner” using the conditional card, so I can only see mine events and my wife hers.

Now I have 2 questions I didnt find on docs.

1 → Is there a way to hide Weekends? Just to clean it a little more, I tried the 5 days function but is not the goal so it didnt work.

2 → I tried also to hide the background shadow using card-mod but had no success, do you know if is there another propriety on this card I have to use?

image
image1861×868 433 KB

image
image634×631 29.4 KB

Also tried to apply the CSS on the conditional card as well but same result.

Thanks in advance.

17

There is no way to hide the weekends. I could add it, but it always shows today as the first day, so I’m not sure what should happen if today is in the weekend.

The background color for the card is already transparent because noCardBackground is set. I think you mean the event background. That can be set using the eventBackground configuration. You can set that to transparent. No need for card_mod.

18

It is not the eventsBackground I want.

It is the entire card, se the border, it is the box-shadow.

I found it here on CSS.

image
image551×599 98.6 KB

See the difference.

image

Im playing here with card mod to remove that haha

For the weekend question, maybe if you set the first day to be always 0 ( sunday ) or 1 ( monday ) and not today could solve that, just a opinion btw, dont know if it will impact on another things.

thanks for the card btw, very pretty

20

Ah, I have a theme without box-shadow. I’ll add styling to remove box-shadow if noCardBackground is set.

Until that’s done, have you tried setting “--ha-card-box-shadow: none;” or “box-shadow: none !important;” with car_mod? I think either one of those should work.

This card only shows days in the future (and today), no days in the past. Starting on a fixed week day would change that. For me that would make it much less useful. I show 7 days. If the first day is always Sunday and it’s Saturday now, I wouldn’t see tomorrow. I could see if I can make this configurable if it doesn’t add too much complexity.

1 Like
21

Hmm maybe the simplier way to do that is to check if user wants to hide weekends.

and also if today is a weekend, the day that shows is Monday.

but also check if weekend has no events, so they would not be hidden as well.