Lovelace: Advanced calendar card

@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

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"

The easiest way to install this is to use HACS.

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

lots of spelling errors in there.

try:

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

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

Here is the solution: Lovelace: Advanced calendar card

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

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 ?

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

@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

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

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

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…

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

I am in yaml-mode…

Got it solved by cleaning out “google_calendars.yaml”.

1 Like

Can someone please help me with this.

have installed the calendars (authenticated fine)
now what do i need to do ? added the following lines to the RAW Config Editor;

  • type: module
    url: /community_plugin/atomic_calendar/atomic_calendar.js

This then creates a new tab across the top of my hassio overview ?
How do i actually display the card ? do i need to add some lines into my configuration.yaml ?

Please help

So have changed over to using the ui-lovelace.yaml file (moved all my raw lines of code into it and got my cards back as it was before) now can someone please advise what lines of code i need to add into this file and any other to get this card displaying.

I have installed the calendar card using HACS

The code lines you posted above go under the resources: section in the ui-lovelace.yaml file. Nothing goes in configuration.yaml for Lovelace except for the mode config which you already did.

After you add the code above to ui-lovelace.yaml then restart HA. Then add the card to your Lovelace config per the github repo instructions. Then refresh lovelace.