Family calendar

edit: I solved my first problem, the answer was right there on the github, but somehow I missed it. Sorry if this is a newb question, but I’m trying to set the number of days to display using a sensor value, can anyone see what I’m doing wrong?

type: custom:week-planner-card
calendars:
  - entity: calendar.family
    color: '#e6c229'
dayFormat: >-
  '<span class="number">'d'</span> <span class="month">'MMMM'</span> <span
  class="month">'ccc'</span> '
noCardBackground: true
eventBackground: rgba(0, 0, 0, .75)
compact: true
locationLink: https://www.openstreetmap.org/search?query=
locale: en
days: '{{ states("sensor.no_of_calendar_days") | int }}'
startingDay: monday
card_mod:
  style: |
    .event.past {
      opacity: .3;
    }

1 Like

I must say this Custom card is really impressive. Using it for a while already, but my family members complain about the fact there’s no name displayed on each event shown. The only way to see who has the event on it’s calendar is by clicking the event.
Right now the only way to know which event belongs to who is by remembering the color assigned to that calendar.
Is it possible to show the name of the owner (or a predefined name) at the overview on each event?
In the doc’s I’ve found this, but it doesn’t seems to work as no names are shown, or I implemented it in a wrong way, or I misunderstood the use case for this attribute :slight_smile:

My code and the suggested placeholder for the name is shown below:

Is this even possible? As I couldn’t find anyone else with the same question (am I the only one?)

@FamousWolf first off thanks for making this card its very well thought out.

I was wondering if you have a simple way to convert the Hex Value of the border-color to RGBA where the Alpha value is hard coded. I first thought I could write a small script but it doesn’t look like I can in YAML…

Anyway I’m trying to take the border color and then use a muted version as the background color.

Maybe an update to your script you could offer a Background color option on each calendar.

here is the script I tried…


   <script>
    function hexToRgba(hex, alpha) {
      let r = parseInt(hex.slice(1, 3), 16);
      let g = parseInt(hex.slice(3, 5), 16);
      let b = parseInt(hex.slice(5, 7), 16);
      return `rgba(${r}, ${g}, ${b}, ${alpha})`;
    }
        document.documentElement.style.setProperty('--my-color', hexToRgba(var(--border-color), 0.8));
    </script>

Hello,

is it possible to show the Day Number for Saturday and Sunday in a different Color?

ManyThanks
Daniel

I have found the name: var is used only in a hidden option to view the Legend.
If at the top level you use showLegend: true you will see the calander.name so if you use the name var on the cal level you can show a friendly name like below.

1 Like

And yet another time the community comes to the rescue :grin:
Not exactly what I’ve asked for, but a perfect workaround.

As this feature isn’t documented, how’d u find out?

Thanks a lot +1 for you @Skilly

Its in the code. I was trying to solve another problem and came across lots of refs to Legend and gave it a try.

1 Like

Yeah the app is setup nicely to make changes like that if you are using card mod. If not you just need to install it in the HACS Store. See the examples in the picture.

put this code inline at the top level. If your using style already just add from the .saterday down

card_mod:
  style: |
    .saturday .number {
      color: #d50000;
    }
    .sunday .number {
      color: red;
      border-radius: 100%;
      background-color: rgba(0,0,250,.1);
    }

1 Like

Sorry this should have been a reply to @PapaWago

Alright this one took me a minute but I got it worked out. Your going to need to wrap your card inside another card called config-template-card. Then you can put some variables in and call them. See the code below.

type: custom:config-template-card
variables:
  DAYS: states['number.days_this_month'].state
entities:
  - number.days_this_month
card:
  type: custom:week-planner-card
  timeFormat: h:mma
  hideDaysWithoutEvents: true
  days: ${DAYS}
  showLegend: true
  calendars:
    - entity: calendar.family
      color: "#8e24aa"
      name: Family
1 Like

I Quite can’t get it to work.

…installed the config-template-card, but it doesn’t even show the calendar.
Does the variable interact with the custom week planner? Or does it just limit the size of the area where the calendar is shown?

Hey I thought others might be interested I was able to get my problem fixed with the second color for each Calendar. See the results below. I submitted a pull request for the change which is very small to allow for it.

As I said it requires a code change but here is how it works once that’s done.

calendars:
  - entity: calendar.family
    color: rgba(142,36,170,1)
    background: rgba(142,36,170,.2)
    name: Family
  - entity: calendar.sarah
    color: rgba(0,255,215,1)
    background: rgba(0,255,215,.2)
    name: Sarah
  - entity: calendar.greg
    color: rgba(239,108,0,1)
    background: rgba(239,108,0,.2)
    name: Greg
  - entity: calendar.jacob
    color: rgba(213,0,0,1)
    background: rgba(213,0,0,.2)
    name: Jacob
  - entity: calendar.charlotte
    color: rgba(61,66,245,1)
    background: rgba(61,66,245,.2)
    name: Charlotte
2 Likes

Wow, many Thanks. It just works fine :slight_smile:

I just noticed my calendar is defaulting to the timezone set by the device I am using.

I am currently using my device in Perth which is AWST +8GMT but the events in my calendar are based on AEST +11 DST (Daylight Savings Time)

This is resulting in my calendar showing a 3hr difference.

Can someone show me how to use the locale setting, to I assume lock the calendar times to the locale of the events? Rather than my current locale.

I might be missing something really simple but how do I change the text colour for “No Events” text, the text for actual events and times? Mine are grey on a darker grey background and can barely see them!

Do you know if these changes were merged? I tried making the YAML changes you mentioned but nothing changed for me.

I would like to add some buttons and entities cards to the bottom of the calendar page. I planed for the buttons to allow me easily change to other dashboard pages. Does anybody know how to add these buttons and entities cards to the bottom of the calendar page?

I can get the different calendars to show a line on the left with the color but I cannot get the background color to show up, any suggestions?

That is an awesome view of the calendar. I had to tinker a bit as I am very fresh with HA but it worked out really nice.

I need to play around with it…

Best, J.

In case you haven’t gotten an answer yet: You need to use “background-color” not “background”.

Hi everyone,
Does anyone know how to remove the Spaces or make them smaller?
image
i’ve tested several settings, but nothing works

card_mod:
  style: |
    ha-card {
      box-shadow: none;
      font-size: 7px !important;
      width: 1900px;
      max-height: 250px !important;
      overflow: hidden;
      .event {
       line-height: 8px !important;
       padding: 1px !important;
       border-width: 5px !important;
       border-radius: 2px !important;
       margin-top: 0px !important;
       font-size: 1.5em !important;
       
       }
    }

any idea?