Family calendar

Share your Projects! Dashboards & Frontend
54

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

image
image1038×498 85.3 KB

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.

55

+1 for this

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

56

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)

57

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.

58

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.

59

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;
    }
60

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.

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

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

Again, you can change this using card_mod.

1 Like
61

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.

1 Like
62

Hi,

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

First comment :wink: :slight_smile:

afbeelding
afbeelding1007×181 18 KB

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

63

Awesome. it works great thank you.

64

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.

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.

3 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).