Family calendar

Share your Projects! Dashboards & Frontend
65

I am trying to change the font size for the different calendar portions—specifically the .title portion. I want to make the title larger and I can’t figure what I need to put into a card_mod to make it work. The below is from inspecting the Title portion.

ha-card {
    --days-spacing: 15px;
    --day-date-number-font-size: 3.5em;
    --day-date-number-line-height: 1.2em;
    --day-date-text-font-size: 2.25em;
    --events-margin-top: 10px;
    --event-spacing: 5px;
    --event-padding: 10px;
    --event-border-width: 5px;
    --event-border-radius: 5px;
    **--event-font-size: 2em;**

Thoughts?

66

I have been playing with this more and not making any progress.

Below is what I have tried but they didn’t make any difference to the event size.

card_mod:
          style: |
            ha-card {
            .event {
             font-size: var(--day-date-number-font-size) !important;
            }
          }
           ```



card_mod:
          style: |
            ha-card {
            .event {
             font-size: 50px !important;
            }
          }
            ```

card_mod:
          style: |
            ha-card {
            .event {
             font-size: 3em !important;
             }
            }
          ```
67

Disregard…this was a dumb mistake on my part. I spun up a new version of HA and I forgot to install card-mod. :man_facepalming:

68

First off, this is awesome and exactly what I have been trying to find!

I noticed that the calendar integration in HA has the ability to add events, delete events, and even create a calendar.

Also noticed that when clicking an event in the default calendar card there is an option to delete the event, but this is not an option in your project.

Is there a way to mirror some of the calendar functionality that is in the default card?

Thanks for all of your efforts and a great mod

69

Love your calendar!
I’ve managed to take inspiration from DAKBoard and create a lovelace dashboard similar to what I had previously, but now with an iteractive touch!

HomeAssistant Board
HomeAssistant Board1920×1080 349 KB

Check out my config here:
https://github.com/arogers86/HABoard

I do a lot with card_mod for the weekly planner and it looks great.

5 Likes
70

Love this card calendar. I am having an issue getting the background to be set up. Where do you store and how do you fetch the background image?

Custom element doesn’t exist: week-planner-card.
I tried UI then manual config My local folder is apparently, www/community
The initial install put the .js and .gz in a folder called /week-planner-card in the www folder. It showed up (and looked amazing) but keeps disappearing with that error above. I have tried every combo I could of
/local/week…
/local/www/week…
/www/week…
/local/week/community/www…
etc. I am sure you get the idea.
I pulled the .js file out of the subfolder and deleted that, trying all of the above again, but same results.

Any suggestions or guidance would be much appreciated.

71

Love this planner - just what I was looking for. Quick question - is it possible to add the ability to go backwards / forwards through the calendar. eg. a button to jump to the next week / month ( have it as a month view and would be good to be able to jump forward to next month to see what’s coming up)

72

Any chance someone would know how to highlight the background color of events from specific calendars similar to this photo?

cal
cal1728×1038 218 KB

1 Like
73

I love this calendar, thank you so much for the work you put in. Would it be posible to have the ability to show it as a list for display on screens in portrait orientation? (similar to the view that shows when you are editing).

74

Hello All -

@FamousWolf thanks for making this, it’s a great addition to HA! I’ve got it working well, but ran into one issue, my text is showing dark vs. every other photo shows text white…

Any ideas how to fix this?

Here is a screenshot of my clock and in the corner and with my photo background it’s almost invisible…

Screenshot 2024-08-25 at 12.07.57 PM

75

No way to navigate through months ?
It will be perfect with that !

76

I am looking for this as well. I would love a nice design in portrait mode.

77

I think this might help: Family calendar - #59 by FamousWolf

78

Love this calendar. Is there a way to show the items in hours of the day on left side if only 1 week shown.

Like this

IMG_2931
IMG_2931706×1472 62.9 KB

1 Like
79

I’ve been using this for a while, and love it. Question: If your wife invites you to a party on friday at 8, and you have displayed (on a wall tablet) both of your calendars, there’s now a duplicate, one from yours and one hers. This isn’t the cards fault at all, but is there a way/workflow around this?
Thanks again for a great card, that looks great on my wall!

80

How did you hide the No Event labels?

82

I also would like to have this function for my use.
If the event can be shown in hours (like the Outlook calendar), so it is clear how long and at which time it starts and end, instead of reading the text.
Thanks!

1 Like
84

Anyone know how to change the font color of the time on the event from gray to something else, I tried adding this in the yaml but can’t seem to change it.

.time {
color: var(–secondary-text-color, #ffffff);
}

image

85

Is there an option to easily scroll through the dates and months that I am missing?

86

Hello,

Nice work!

Is there a way to limit the nr of events to show? In a day with multiple cliënts, my wife’s calendar floods my dashboard …

Many thanks in advance…

1 Like