have added this to the top of the ui file
resources:
- url: /community_plugin/atomic_calendar/atomic_calendar.js
type: module
now how do i add a simple calendar ?
The instructions are in the github repo.
if i paste my ui code in here can you show me were to put it with an example ?
I think I am so close
resources:
- url: /community_plugin/atomic_calendar/atomic_calendar.js
type: module
title: Hardy Family Home Automation
views:
- badges: []
cards:
- entities:
- entity: person.steven_hardy
- entity: person.jennifer_hardy
show_header_toggle: false
title: Home or Away
type: entities
- entity: weather.dark_sky
type: weather-forecast
- entities:
- entity: sensor.meross_1806229817937125133234298f1368eb_power
- entity: switch.meross_1806229817937125133234298f1368eb
- entity: sensor.meross_1806222324060625133234298f13653d_power
- entity: switch.meross_1806222324060625133234298f13653d
show_header_toggle: false
title: Meross
type: entities
- entities:
- entity: binary_sensor.ee_smarthub
- entity: binary_sensor.ee_tv
- entity: binary_sensor.htpc
- entity: binary_sensor.playroom_pc
show_header_toggle: false
title: Network Devices
type: entities
- entity: sensor.finley_dads_minecraft_server
name: Minecraft Server
type: sensor
- entity: media_player.kitchen_echo_dot
type: media-control
- entity: media_player.master_bedroom
type: media-control
- entities:
- entity: person.steven_hardy
- entity: person.jennifer_hardy
geo_location_sources:
- all
title: Map
type: map
path: default_view
title: Home
- badges: []
cards:
- entities:
- entity: automation.steve_at_work
- entity: automation.steve_at_home
- entity: automation.steve_leaving_work
- entity: automation.steve_left_home
- entity: automation.jenn_at_home
- entity: automation.jenn_at_work
- entity: automation.jenn_left_home
- entity: automation.jenn_left_work
- entity: automation.steve_dropping_kids_off
show_header_toggle: false
title: Tracking Notifications
type: entities
- entities:
- entity: automation.washing_machine_on
- entity: automation.sunset
- entity: automation.bed_time
show_header_toggle: false
title: Home Automations
type: entities
- entities:
- entity: automation.apple_music_alexa_test
show_header_toggle: false
title: Misc
type: entities
path: automations
title: Automations
- badges: []
cards:
- entities:
- entity: sensor.jennbear_battery_level
- entity: sensor.jennbear_battery_state
- entity: sensor.steves_iphone_battery_level
- entity: sensor.steves_iphone_battery_state
show_header_toggle: false
title: iPhones
type: entities
path: devices
title: Devices
You put it into your lovelace configuration just like you have done with any other card in your posted config. the only difference is that under “type:” you need to add “custom:” to the front of the card type.
There are two types of calendars you can set up using this custom card.
One is a card that lists ,in date order from top to bottom, the upcoming events in your calendar.
Here is my config for that card as if you had added it to the correct place in your confog for it to show up at the beginning of your lovelace page:
resources:
- url: /community_plugin/atomic_calendar/atomic_calendar.js
type: module
title: Hardy Family Home Automation
views:
cards:
- type: "custom:atomic-calendar"
title: "Calendar"
showProgressBar: false
showCurrentEventLine: false
maxDaysToShow: 14
dayWrapperLineColor: white
titleSize: 110
showMonth: true
locationIconColor: '#f44242'
locationlinkColor: '#B58E31'
entities:
- calendar.my_calendar_gmailcom
- entities:
- entity: person.steven_hardy
- entity: person.jennifer_hardy
show_header_toggle: false
title: Home or Away
type: entities
- entity: weather.dark_sky
type: weather-forecast
- etc
and this is how it looks:
The other style of calendar is one that shows the entire month but only allows you to display certain events based on some filter(s) you configure
Here is that one:
resources:
- url: /community_plugin/atomic_calendar/atomic_calendar.js
type: module
title: Hardy Family Home Automation
views:
cards:
- type: "custom:atomic-calendar"
title: "Work Calendar"
defaultMode: 2
firstDayOfWeek: 7
CalEventIcon1Filter: days
CalEventIcon1: mdi:weather-sunny
CalEventIcon1Color: green
CalEventIcon2Filter: nights
CalEventIcon2: mdi:weather-night
CalEventIcon2Color: red
CalEventIcon3Filter: DD
CalEventIcon3: mdi:star
CalEventIcon3Color: orange
entities:
- entity: calendar.my_calendar_gmail_com
type: icon1,icon2,icon3
- entities:
- entity: person.steven_hardy
- entity: person.jennifer_hardy
show_header_toggle: false
title: Home or Away
type: entities
- entity: weather.dark_sky
type: weather-forecast
- etc
and here is how that one looks:
1 Like
resources:
- url: /community_plugin/atomic_calendar/atomic_calendar.js
type: module
- url: /community_plugin/quote-of-the-day-card/quote-of-the-day-card.js
type: js
title: Hardy Family Home Automation
views:
- badges: []
cards:
- type: "custom:atomic-calendar"
title: "Calendar"
showProgressBar: false
showCurrentEventLine: false
maxDaysToShow: 14
dayWrapperLineColor: white
titleSize: 110
showMonth: true
locationIconColor: '#f44242'
locationlinkColor: '#B58E31'
entities:
entity: [email protected]
- entities:
- entity: person.steven_hardy
- entity: person.jennifer_hardy
show_header_toggle: false
title: Home or Away
type: entities
- entity: weather.dark_sky
type: weather-forecast
- entities:
- entity: sensor.meross_1806229817937125133234298f1368eb_power
- entity: switch.meross_1806229817937125133234298f1368eb
- entity: sensor.meross_1806222324060625133234298f13653d_power
- entity: switch.meross_1806222324060625133234298f13653d
show_header_toggle: false
title: Meross
type: entities
- entities:
- entity: binary_sensor.ee_smarthub
- entity: binary_sensor.ee_tv
- entity: binary_sensor.htpc
- entity: binary_sensor.playroom_pc
show_header_toggle: false
title: Network Devices
type: entities
- entity: sensor.finley_dads_minecraft_server
name: Minecraft Server
type: sensor
- entity: media_player.kitchen_echo_dot
type: media-control
- entity: media_player.master_bedroom
type: media-control
- entities:
- entity: person.steven_hardy
- entity: person.jennifer_hardy
geo_location_sources:
- all
title: Map
type: map
path: default_view
title: Home
- badges: []
cards:
- entities:
- entity: automation.steve_at_work
- entity: automation.steve_at_home
- entity: automation.steve_leaving_work
- entity: automation.steve_left_home
- entity: automation.jenn_at_home
- entity: automation.jenn_at_work
- entity: automation.jenn_left_home
- entity: automation.jenn_left_work
- entity: automation.steve_dropping_kids_off
show_header_toggle: false
title: Tracking Notifications
type: entities
- entities:
- entity: automation.washing_machine_on
- entity: automation.sunset
- entity: automation.bed_time
show_header_toggle: false
title: Home Automations
type: entities
- entities:
- entity: automation.apple_music_alexa_test
show_header_toggle: false
title: Misc
type: entities
path: automations
title: Automations
- badges: []
cards:
- entities:
- entity: sensor.jennbear_battery_level
- entity: sensor.jennbear_battery_state
- entity: sensor.steves_iphone_battery_level
- entity: sensor.steves_iphone_battery_state
show_header_toggle: false
title: iPhones
type: entities
path: devices
title: Devices
I get an error ;
bad indentation of a sequence entry at line 22, column 7:
- entities:
^
in my ui-lovelace file ?
That’s because the section you added for the calendar card is not indented far enough by two spaces.
look at the code you posted above and then look at the code I posted above that. Hopefully you can see the difference.
try this:
resources:
- url: /community_plugin/atomic_calendar/atomic_calendar.js
type: module
- url: /community_plugin/quote-of-the-day-card/quote-of-the-day-card.js
type: js
title: Hardy Family Home Automation
views:
- badges: []
cards:
- type: "custom:atomic-calendar"
title: "Calendar"
showProgressBar: false
showCurrentEventLine: false
maxDaysToShow: 14
dayWrapperLineColor: white
titleSize: 110
showMonth: true
locationIconColor: '#f44242'
locationlinkColor: '#B58E31'
entities:
- [email protected]
- entities:
- entity: person.steven_hardy
- entity: person.jennifer_hardy
show_header_toggle: false
title: Home or Away
type: entities
- entity: weather.dark_sky
type: weather-forecast
- entities:
- entity: sensor.meross_1806229817937125133234298f1368eb_power
- entity: switch.meross_1806229817937125133234298f1368eb
- entity: sensor.meross_1806222324060625133234298f13653d_power
- entity: switch.meross_1806222324060625133234298f13653d
show_header_toggle: false
title: Meross
type: entities
- entities:
- entity: binary_sensor.ee_smarthub
- entity: binary_sensor.ee_tv
- entity: binary_sensor.htpc
- entity: binary_sensor.playroom_pc
show_header_toggle: false
title: Network Devices
type: entities
- entity: sensor.finley_dads_minecraft_server
name: Minecraft Server
type: sensor
- entity: media_player.kitchen_echo_dot
type: media-control
- entity: media_player.master_bedroom
type: media-control
- entities:
- entity: person.steven_hardy
- entity: person.jennifer_hardy
geo_location_sources:
- all
title: Map
type: map
path: default_view
title: Home
- badges: []
cards:
- entities:
- entity: automation.steve_at_work
- entity: automation.steve_at_home
- entity: automation.steve_leaving_work
- entity: automation.steve_left_home
- entity: automation.jenn_at_home
- entity: automation.jenn_at_work
- entity: automation.jenn_left_home
- entity: automation.jenn_left_work
- entity: automation.steve_dropping_kids_off
show_header_toggle: false
title: Tracking Notifications
type: entities
- entities:
- entity: automation.washing_machine_on
- entity: automation.sunset
- entity: automation.bed_time
show_header_toggle: false
title: Home Automations
type: entities
- entities:
- entity: automation.apple_music_alexa_test
show_header_toggle: false
title: Misc
type: entities
path: automations
title: Automations
- badges: []
cards:
- entities:
- entity: sensor.jennbear_battery_level
- entity: sensor.jennbear_battery_state
- entity: sensor.steves_iphone_battery_level
- entity: sensor.steves_iphone_battery_state
show_header_toggle: false
title: iPhones
type: entities
path: devices
title: Devices
EDIT to add:
I really dislike using the UI editors for this stuff. It makes it harder to see indentation errors. and that’s why I don’t use it.
thank you so much !!!
i owe you a beer 
1 Like
Hi,
Get the same issue and tried to solve it by cleaning out “google_calendars.yaml”.
But didn’t resolve the issue.
Did it resolve directly or did you wait for sometimes ?
I’ve restart HA but without success.
Any other though ?
Hi Auredor,
My issue got solved immediately after the clean-up and a HA restart.
If that does not solve your issue, I suggest to look into the authentication process with Google calendar.
Have a look at the notifications section in HA; maybe you have some pending for you (although this was not the case in my situation)…
Hello.
I’m using Atomic Calendar on my HA configuration. All works well on computer but not on my IOS or my MediaPad.
Can you tell me if I’m doing something wrong?
On my Android or IOS:
Such a great card. Working perfectly.
Has there been any consideration for allowing the option to hide completed events rather than simply “greying” them out?
Is there any chance to use your great component with own-hosted caldav-calendar? 
I can’t get the calendar working. I’ve never used a manual card before. I am using HA 0.100 so Lovelace should be enabled by default. The Google calendar is working fine so step 1 is completed.
I’ve installed atomic_calendar.js in the www folder and installed it with HACS aswell. That should complete step 2.
I’ve added this to my ui-lovelace.yaml file. It didn’t exist so I created it.
resources:
- url: /local/atomic_calendar.js
type: module
Then starts the confusing part. You should add the calendar with option to the ui-lovelace.yaml too, but then the card is still not being displayed in the overview. So I tried to add a manual card with the required settings, but that does not work:
type: 'custom:atomic-calendar'
entities:
- entity: calendar.[name]
If you installed it using HACS then there is no need to manually put it into the www folder. HACS put’s things into a community-plugins folder that it creates.
you added it wrong.
HACS gives you instructions on how to enter it into ui-lovelace.yaml. It should be something like (taken directly from the HACS installation page):
- url: /community_plugin/atomic_calendar/atomic_calendar.js
type: module
I have two feature suggestions:
- Add an option to show the calculated age. This is for birthdays and anniversaries. Something like ‘28 years’, where it could take the place of ‘All Day’, since all birthday’s are all day
- Add an option to append a countdown, such as ‘in 5 days’, probably also where ‘All Day’ would go. This would be handy for any upcoming all day events, especially if it’s a far ahead looking calendar.
These ideas would be best implemented as per entity options.
I’m having issues with getting different colors per entity. I’ve tried a number of different configurations, but this is what I have currently:
title: Calendar
type: 'custom:atomic-calendar'
showColors: true
entities:
- entity: calendar.schedule_a
timeColor: 'rgb(194, 40, 28)'
- entity: calendar.schedule_b
timeColor: 'rgb(227, 150, 54)'
If I put timeColor at the root level it changes the color of both calendars fine, but I need some way to differentiate events from each calendar. From reading around, my understanding is that this is possible so I must just be missing something.
I’m running Home Assistant 0.101.2 and v0.8.9 of the calendar card installed from HACS.
Thanks for the calendar card… Can’t imagine how much work it is/was to do… Mine has been working for a while - it seems like auto update via HACS is my next step.
I’m relatively new to HA… but one thing I’m learning is there seems to be a lot of ways to do the same thing when it comes to configuring stuff.
Much appreciated!
I am having strange behaviour with the calendar.
My config is:
- type: "custom:atomic-calendar"
title: "Agenda"
entities:
- type: icon3
entity: calendar.inter_calendar
- type: holiday
entity: calendar.festivita_cristiane
- entity: calendar.festivita_in_tailandia
type: holiday
- type: icon1,icon2,icon3
entity: calendar.xxxxxxxxxgmailcom
- entity: calendar.storia_ditalia
fullDayEventText: 'Intero Giorno'
CalEventHolidayColor: red
CalEventIcon1: mdi:weather-sunny
CalEventIcon1Color: green
CalEventIcon2: mdi:weather-night
CalEventIcon2Color: red
CalEventIcon3: mdi:star
CalEventIcon3Color: orange
untilText: 'Until'
showColors: true
maxDaysToShow: 14
showLocation: true
showMonth: true
showCurrentEventLine: false
showLoader: true
dateColor: white
dateSize: 90
timeColor: 'rgb(52, 164, 235)'
timeSize: 90
titleColor: white
titleSize: 110
locationIconColor: 'rgb(230, 124, 115)'
locationLinkColor: white
locationTextSize: 90
dimFinishedEvents: true
finishedEventOpacity: 0.6
finishedEventFilter: 'grayscale(100%)'
dayWrapperLineColor: white
eventBarColor: blue
showProgressBar: true
progressBarColor: blue
enableModeChange: true
defaultMode: 2
And the screenshot when i press over a day is:
As you can see i get repeated three times the same text also if in that day there are three different entries from three different calendar entities.
Is it a bug or am i wrong in something?
1 Like