Family calendar

cedricdelecole · December 4, 2024, 7:27am

Thanks a lot @raphc … but I do not think this is linked to any lovelace issue … as the dashboard opens correctly on my computer, and issue only happens on the wall tablet.
The “Home button”, though, appears correctly.

I am wondering if this is not caused to this …
On the computer even, it takes 1 to 2 seconds to open the calendar, it seems to be “working”, looking for the information …
I am wondering if on the tablet, as information is not directly available, it then shows this error message that the custom element doesn’t exist …

FamousWolf · December 4, 2024, 8:32am

@cedricdelecole It’s most likely a cache problem. Try clearing the cache on your wall tablet.

Starkman68 · December 6, 2024, 4:41am

I was wondering if you know why I would get a JS error when I click add calendar? I have the latest version(11)
js Uncaught TypeError: can't define array index property past the end of an array with non-writable length

FamousWolf · December 6, 2024, 7:40am

@Starkman68 Unfortunately I can’t reproduce that, but it sounds like a bug. Can you make an new issue for that on Github?

I will need more information though. What browser including version are you using? Which OS including version? Which HA version? Is it a newly created card or are you editing an existing card? Can you share the YAML configuration before you try to add a calendar? Are there any other errors before this one? Please add this information to the Github issue.

cedricdelecole · December 6, 2024, 9:28am

Thanks a lot @FamousWolf , it worked with a tablet restart !!

cedricdelecole · December 6, 2024, 9:35am

Hello team,
@FamousWolf

So I looked to have a calendar view on my wall tablet showing the 7 next coming days, in column view, and I tried the standard HA calendar card, as well as this “FamousWolf/week-planner-card” … and I am mitigated between both cards …

The standard calendar card is doing the job, I can navigate through the calendar, but is not showing like I really want in Day - columns (instead, it is showing the full month, I can still show week days view but this is not in 7 columns … ) :

YOUR Celendar is showing like I want the 7 days in columns, but it is not very beautiful :

I do not find how to adjust the full card in width and height - is it possible ?
Is it possible to adjust and set a specific size of the columns ?
Is it possible to add a line to separate the columns
and last but not least, I can not navigate from weeks to weeks …it is only showing the current week …

Here is my actual code :

kiosk_mode:
  admin_settings:
    hide_header: false
    hide_sidebar: false
  non_admin_settings:
    kiosk: true
views:
  - title: Home
    sections: []
    type: custom:grid-layout
    layout:
      grid-template-rows: 75px 1000px
      grid-template-columns: 1440px
      grid-template-areas: |
        "head1 head2"
        "col1 col1"
    cards:
      - type: custom:mushroom-chips-card
        chips:
          - type: entity
            entity: person.delecole
            tap_action:
              action: navigate
              navigation_path: /lenovo-m10-plus-home/0
            name: Homeee
            content_info: name
            icon: mdi:home
            use_entity_picture: false
            icon_color: yellow
        view_layout:
          grid-area: head1
      - type: custom:week-planner-card
        calendars:
          - entity: calendar.xxx_gmail_com
            color: yellow
          - entity: calendar.yyy_gmail_com
            color: lightblue
        days: 7
        locale: fr
        view_layout:
          grid-area: col1

Starkman68 · December 6, 2024, 8:36pm

I think it might be because I am using CalDav for my Apple calendars. I did not add any gmail calendars. If that is the case, I wonder how hard it is to get the info from it. Great project BTW.

kexan82 · December 7, 2024, 10:10am

ive been looking for a calendar like this for a long time! Thank you for making it.

is it possible to have the current day/date be red in color? so you can quickly see where you are in a monthly calendar?

Ector73 · December 9, 2024, 8:33am

like that

  card_mod:
    style: |
        .today .number {
          color: red;
          border: solid 2px red;
          border-radius: 4px;
          background-color: white !important;
        }

Nick4 · December 9, 2024, 12:37pm

Thank you, needed that too!

Johan_L · December 9, 2024, 2:07pm

Is it possible to hide the Day number & text? like you toggle the weather info?

I would like to use 1 card with the Numbers, text and a general calendar and place a calendar card below it for every member of the family.

kexan82 · December 9, 2024, 3:59pm

thank you!

Johan_L · December 9, 2024, 6:42pm

So a bit new to all of this, but thanks to the posts around me about the number color I figured it could be done with card mod.

card_mod:
  style: |
    .number {
      display: none;
    }
    .text {
      display: none;
    }

Not sure if this is the cleanest way but it removes the numbers and days, only i’m running into some problems that the calendars load very slow but am running on a rpi3 for testing so that could be the cause.

cedricdelecole · December 10, 2024, 1:55pm

I am always surprised about the card_mod options … where is all of this dcumented and how do we know what is possible to do or not ?

For example, how did you find this code was valid :

    style: |
        .today .number {
          color: red;
          border: solid 2px red;
          border-radius: 4px;
          background-color: white !important;
        }

Also, can someone please reply on my comment from above :

Johan_L · December 11, 2024, 1:57pm

I would like to know that to.

For example is it possible to change the font sizes with card_mod?

Johan_L · December 12, 2024, 2:57pm

After some googeling and experimenting i found that you can find everything you can change in: week-planner-card/src/card.styles.js at 168b5284564ca5ff935560b79cd5ed3a14a854f4 · FamousWolf/week-planner-card · GitHub

Then it’s a game of deducting and testing it in the dashboard editor.
But i managed to hide numbers and texts and change the fontsize.

For some reason i’m not able to change the .event .time color yet but that’s not a big issue.

Also you need to install the card mod module to be able to do this,

Did someone found a way to show the weeknumber after date & day?
i know it’s possible with dateFormat but then it’s all just a line of text without styles.

Ector73 · December 16, 2024, 8:45am

I created in a “handmade” way the possibility to add an event in google calendars.
I used:
4 helpers for start-end date and time;
1 input-boolean to set “all day”;
2 scripts: one prepares and the other inserts the event;
1 automation to set date and time based on input-boolean “all-day”.
A bit convoluted, but it works very well.
Unfortunately it is not possible to use a pop-up (date setting does not work), and I solved it with a dedicated “view”.
If you are interested I can share the code.

Anyway thanks to FamousWolf for his updates: I appreciated, among many, the “legendToggle” option.

PS: I’m also looking for a way to delete an event from the calendar, but it seems more complicated. Any ideas?

marksev1 · December 16, 2024, 8:59am

Very cool week planner card project! Now I’m testing 3 layout and I found a crucial thing missing.
How to add the “option” for today’s day to be highlighted with a certain color in the calendar? So for a calendar with for example 3 weeks, one can see the current day fast at a glance.

Ector73 · December 16, 2024, 9:36am

if you read a few posts back you will find the answer