Lovelace: Advanced calendar card

Share your Projects! Dashboards & Frontend
136

Great card @atomic77!

It would be nice to show the configuration used to generate the cards shown in the readme on github.

I’m struggling with getting different colors on events from different calendars in the Events mode with the following configuration:

entities:
  - color: red
    entity: calendar.family
  - color: gray
    entity: calendar.skolmat
  - entity: calendar.work
    color: red
showColors: true
type: 'custom:atomic-calendar'
137

Have the same issue with basically the same config. Using three calendars and set different colors, but no colors show up.

Edit: Nice… one minute later I got some colors showing up. According to https://github.com/atomic7777/atomic_calendar/blob/master/README.md there’s no color option in the list, but more specific options like titleColor. The Markdown in the readme is somehow broken and the table isn’t rendered properyl on Github.

138

I’ve reformatted the README.md here: https://github.com/atomic7777/atomic_calendar/blob/da94bf7b90db02f89819f8a907212f4179a2dca0/README.md

Did you manage to get each calendar show a separate color? Wich version of atomic_calendar are you running?

139

I submitted a PR to try to fix the layout four days ago.

1 Like
140

I saw that when I’ve already submitted my fix. I’ve added som formatting to the yaml examples too.

141

@fredrike I’ve downloaded the latest version (v0.8.9 ) from the release page.

title: Termine
showColors: true
entities:
  - entity: calendar.foo_privat
    titleColor: green
  - entity: calendar.foo_geschaeftlich
    titleColor: red
  - entity: calendar.bar
    titleColor: green
type: 'custom:atomic-calendar'

This is looking like the “Kalendarz” picture on GH.

1 Like
142

Tried to find /www but can’t find it… Use Hass in docker on rpi stretch

" Download atomic-calendar.js file to /www directory in your Home Assistant"

143

The easiest way to install this is to use HACS.

144

Im at point to add HASC folder in custom_components.

On Hassio the final location will be /config/custom_components/hacs
On Hassbian the final location will be /home/homeassistant/.homeassistant/custom_components/hacs

my path is:

/usr/share/hassio/homeassistant

tried

/usr/share/hassio/homeassistant/custom_compontent/hasc/
/usr/share/hassio/homeassistant/config/custom_compontent/hasc/

but both not working after restart.

Integration not found: hasc

145

lots of spelling errors in there.

try:

/usr/share/hassio/homeassistant/custom_components/hacs/

146

Hi, I do not manage to get different colors on the calendars.
It worked before I installed 0.8.9 via HACS.

147

Here is the solution: Lovelace: Advanced calendar card

148

Thanks! “titleColor:” with capital “C” was the problem! :slightly_smiling_face:

149

I am having the same issue: “timeColor: white” (or any other color) is just not applied.
It seems to be overridden by the theme colors, as indicated by @finity.

Did anyone get this working ?

150

I had the same issue. I found the solution (I hope it works for you).

For each of your calendar ‘entities’, if you follow the documentation, and add ‘color’, it will upset all colors. You need to use ‘titleColor’ for the entities.

You also need to say (Which I am sure you do):
showColors: true

Then you will get all the other fields to work. With one exception: locationIconColor
The location icon color is added directly into an inline style, so it actually needs to say:
color:rgb(230, 124, 115)

I hope this helps. I really struggled with the colors. It is just that the documentation is not correct.

Here is my entire code. Please note, I use colors from my theme so that when I switch themes, the colors change. But you can just use ‘#FFFFFF’ or rgb.

dateSize: 100
dayWrapperLineColor: 'rgb(255, 255, 255, 0.08)'
dimFinishedEvents: true
entities:
  - entity: calendar.contacts
    titleColor: var(--custom-red)
  - entity: calendar.brett
    titleColor: var(--custom-blue)
  - entity: calendar.talia
    titleColor: var(--custom-pink)
  - entity: calendar.ashton
    titleColor: var(--custom-green)
  - entity: calendar.eli
    titleColor: var(--custom-orange)
finishedEventFilter: grayscale(100%)
finishedEventOpacity: 0.3
hoursFormat: 'h:mm a'
locationTextSize: 100
locationIconColor: 'color:rgb(230, 124, 115)'
maxDaysToShow: 7
showColors: true
showNoEventsForToday: true
showProgressBar: false
timeColor: var(--primary-text-color)
timeSize: 100
title: Our Calendar
type: 'custom:atomic-calendar'
2 Likes
151

@bretteldridge

Works great with putting the detail after each calendar entity.
Thanks for figuring this out and explaining here for the rest of us.

1 Like
152

All,

Just upgraded HASS to v.0.98.1.

The calendar card is not loading with the following error message:
“The calendar can’t be loaded from Home Assistant component”

21

Anyone seen this as well ?
Any solution ?

Thx
Koen

153

I’m also on 0.98.1 and the card is working fine.

154

Thx for the quick reply. Must be my config then.

I think I need to re-authenticate to Google. But there is no notification in the top right corner…
I don’t know how to properly re-auth.
Unless I need to reinstall the whole card…

155

I’m using strictly in panel mode, if that offers any additional help

edit. just turned off panel mode and still working

here’s my config to compare against

dateSize: 120
entities:
  - calendar.family
  - entity: calendar.home_assistant_events
    titleColor: 'rgb(0, 150, 150)'
  - entity: calendar.holidays_in_united_states
    titleColor: red
  - entity: calendar.texas_longhorns
    titleColor: 'rgb(204, 85, 0)'
  - entity: calendar.work
    titleColor: 'rgb(175, 175, 0)'
maxDaysToShow: 14
showColors: true
timeColor: white
timeSize: 110
titleSize: 140
type: 'custom:atomic-calendar'
1 Like