Family calendar

[axl2000 (alex)]

To display only tomorrow’s calendar, is there a way?

[FamousWolf (Rudy Gnodde)]

@patrad1

Do you know where I can override this? I’m trying to make it more readable on a display and it’s perfect if I can change:
Higher than 1280 pixels 7 columns
to
Higher than 1280 pixels 4 columns

I have tried overriding with card_mod and not having much success.

Setting !important for the width works. This will however also override any values in the media queries, so you’ll also have to add those if you want to keep it responsive. You’ll also need to change the 6 to a 3 (which is the number of spaces between the days, so 1 less than the number of columns).

    .container .day {
      width: calc((100% - 3 * var(--days-spacing)) / 4) !important;
    }
    @container weekplanner (width <= 1024px) {
        .container .day {
            width: calc((100% - 2 * var(--days-spacing)) / 3) !important;
        }
    }
    @container weekplanner (width <= 640px) {
        .container .day {
            width: 100% !important;
        }
    }

[FamousWolf (Rudy Gnodde)]

@ianderson

Loving this card it’s exactly what I need.

Is there any way of having the calendars syncing? Plans often change and I delete calendar entries and be nice to see these reflected on the planner.

Keep up the great work.

It fetches the events for all configured calendars every 60 seconds by default. If you want it more often you can set the updateInterval option.

[FamousWolf (Rudy Gnodde)]

@idro

Could you tell me how to add an image background to the dashboard as you done in yours above?

It’s a custom theme. You can find more about that here

[FamousWolf (Rudy Gnodde)]

@axl2000

I find the calendar awesome! Thanks a lot. When I look at it on the PC dashboard, it’s fine, but on the Fire 10" tablet, it looks different. How can I change that? The new sections are selected as the viewing mode

I haven’t been able to reproduce this, but I don’t have a Fire tablet. Did you add any custom styles using card_mod?

[FamousWolf (Rudy Gnodde)]

@idro

Will there be a chance to integrate google tasks also?

Didn’t have any plans for that, but I might in the future.

[FamousWolf (Rudy Gnodde)]

@axl2000

To display only tomorrow’s calendar, is there a way?

Yes, you can set startingDay to tomorrow and days to 1.

[Funkie_Mitch (Mitchell J Renardus)]

Hello all,

whats wrong here.
when i try t oadd via custom repositories i get a error message:
Repository structure for v1.4.0 is not compliant
and cant install

[maxime.granger]

1st of all great custom card.

is there a way to match the background of an event with a calendar color ?

[seththeengineer (seth)]

1st time poster. long time lurker.
Is there a way to start the month on the 1st and display the whole month? Regardless if its moved passed that day.

Is there a way to remove the “eventbackground” from days without any events. I removed the event name now its just a blank background for 1 line with no text

Also is it possible to add a slight shadow to each day? So each day stands out against the background and the calendar itself looks more grid like.

I’m new to all of this so explain it or point me in the direction of very basic material if you can.

Really appreciate all your work.

[Paul_Q (Paul)]

+1 for this

is there a way to match the background of an event with a calendar color ?

[Paul_Q (Paul)]

Is there a way to start the month on the 1st and display the whole month? Regardless if its moved passed that day.

startingDay: monday (might help)

[Paul_Q (Paul)]

I would love to see today be able to have a boarder around it.
I am using startingDay: monday so would help show what day it is.

[FamousWolf (Rudy Gnodde)]

@Funkie_Mitch

whats wrong here.
when i try t oadd via custom repositories i get a error message:
Repository structure for v1.4.0 is not compliant
and cant install

I just tried it and didn’t have any problems with it. I also haven’t heard anyone else with this problem. So unfortunately I don’t know.

[FamousWolf (Rudy Gnodde)]

@maxime.granger

is there a way to match the background of an event with a calendar color ?

The calendar color is set using a CSS variable --border-color, so you can use that with card_mod to set it to the background.

This should do it:

card_mod:
  style: |
    .event {
      background-color: var(--border-color) !important;
    }

[FamousWolf (Rudy Gnodde)]

@seththeengineer

Is there a way to start the month on the 1st and display the whole month? Regardless if its moved passed that day.

Not right now. It shouldn’t be too hard to change though, so if you can make an issue for this I should be able to add it soon.

@seththeengineer

Is there a way to remove the “eventbackground” from days without any events. I removed the event name now its just a blank background for 1 line with no text

You can use card_mod for that. This should do it:

card_mod:
  style: |
    .none {
      background-color: transparent !important;
    }

@seththeengineer

Also is it possible to add a slight shadow to each day? So each day stands out against the background and the calendar itself looks more grid like.

Again, you can change this using card_mod.

[FamousWolf (Rudy Gnodde)]

@Paul_Q

I would love to see today be able to have a boarder around it.

I’ve made a change today to add classes like today, past, future, etc to days and events, so once version 1.5.0 has been released (should be soon) you can do this using card_mod.

[woempiej]

Hi,

Thanks for this great looking dashboard.
I will check/test right now.

First comment

Please add to your readme
HACS > Frontend > 3-dots upper right corner > custom repository > paste url > category “lovelace”

[maxime.granger]

@FamousWolf

style: |
    .event {
      background-color: var(--border-color) !important;
    }

Awesome. it works great thank you.

[kexan82]

This is the calendar i have been looking for since i switched from SmartThings and wallboard. Great work!

Is it possible to make it show five days in a row? Even if it doesnt meet its required width? Its currently showing four in a row with space to shrink to five.