@atomic77 Just wanted to say thanks for all your hard work on this. You did an excellent job.
Mine is still active. The one you forked from. There’s no where near as many options as yours but there’s no issues. I like to keep mine simple but I’m sure power users would love a customizable one like yours.
2 Likes
ljmerza I forked from you, then I tried to learn something and rewrite it. I see you also have a new version, I’m sure my card is not a competition for yours. Your is simple, clean and well written - I see you’re a professional web developer, I used to deal with other things and I’m new to js so it may not be as reliable (still trying to make the code better)
The most important is, I am providing things that I find useful for me, not necessarily good for others.
PlayedIn: Thanks for kind words.
Now I’m working in dev branch on the second mode - a calendar mode, which can be activated by clicking on calendar title. It shows full month with the most important events (holiday, birthdays etc). You can select a month, Click on any day to show a summary.
It’s separate from the events mode, it has to be enabled, and does not affect the “events” part.
2 Likes
That wasn’t @atomic77 who implied your card was buggy and wasn’t maintained (active). Also the card is no longer forked, but instead a rewrite.
Ah yeah I clicked on the wrong reply. I was just trying to clarify there is an active card and it works. He’s free to fork anything I have, a copy or no.
0.7.0 update. Something I wanted to have - “calendar mode” is working (screenshots in first post). Default disabled (I don’t want to interfere with current users, this mode is independent), you can enable it with
enableModeChange: true
and clicking “Calendar” title. Some options to show icons with important events, or colors (like holiday).
defaultMode: 2 will make this mode default.
Also, I added a loading animation because the API request takes some time. Can be disabled with
showLoader: false.
Those are the most important changes. If anyone has any suggestions regarding design or features let me know.
… and a quick fix 0.7.1 for dark themes.
1 Like
new Calendar mode not working in .storage mode (hass.io) for Edge or Firefox. Safari registers an active touch on title, but does nothing with it.
card config:
entities:
- calendar.garyk
- calendar.holidays_in_united_states
- dateColor: black
dateSize: 90
dayWrapperLineColor: black
dimFinishedEvents: true
enableModeChange: true
entity: calendar.kelleycalendar
eventBarColor: blue
finishedEventFilter: grayscale(100%)
finishedEventOpacity: 0.6
fullDayEventText: All day
locationIconColor: 'rgb(230, 124, 115)'
locationLinkColor: black
locationTextSize: 90
maxDaysToShow: 14
progressBarColor: blue
showColors: true
showCurrentEventLine: false
showLocation: true
showMonth: true
showProgressBar: false
timeColor: blue
timeSize: 90
titleColor: black
titleSize: 100
untilText: Until
title: Calendar
type: 'custom:atomic-calendar'Thanks for testing again. I just installed hass.io to test it (I used only manual yaml configuration before). Now I think there is something wrong with your configuration. You have calendar options as entities of calendar entity. HA thinks ‘enableModeChange’ is a part of calendar configuration, instead of card configuration. Try to list it like below, it’s working for me.
type: 'custom:atomic-calendar'
title: Calendar
dateColor: black
dateSize: 90
dayWrapperLineColor: black
dimFinishedEvents: true
enableModeChange: true
eventBarColor: blue
finishedEventFilter: grayscale(100%)
finishedEventOpacity: 0.6
fullDayEventText: All day
locationIconColor: 'rgb(230, 124, 115)'
locationLinkColor: black
locationTextSize: 90
maxDaysToShow: 14
progressBarColor: blue
showColors: true
showCurrentEventLine: false
showLocation: true
showMonth: true
showProgressBar: false
timeColor: blue
timeSize: 90
titleColor: black
titleSize: 100
untilText: Until
entities:
- calendar.garyk
- calendar.holidays_in_united_states
- calendar.kelleycalendarOK. Problem found. I was editing the lovelace file in the .storage directory using the Raw UI Editor. The changes would not appear in the card. So, I backed out and selected the card to edit. The revised card configuration was immediately applied. This seems like a bug.
I think, but I might be wrong, but the whole point of the .storage directory file, is so that you only edit it in the UI, if you want to manually edit YAML files, you need to have lovelace in YAML mode, and use it with the ui-lovelace.yaml
Edits were done in the UI. The card configuration and .storage/lovelace files weren’t in sync. After editing the card config, I had to return to the lovelace file and remove the previous card config entries.
@ atomic77
Just wondering if there is anyway to add an option to select first day to show. For example right now you can maxDaysToShow but it would be nice to show something starting 7 days from now. This would allow me to show stuff that was a week out (or other months) without having to show the more recent stuff. I don’t know if this makes sense or if it is possible but just a thought
Help, Please. I am using the RAW mode in Lovelace UI to edit the cards. I have tried to put in the lines meant for the ui-lovelace.yaml, but it does not seem to work.
I get the error that type custom:atomic-calendar does not exist.
I have put the the atomic-calendar.js in the config/www directory
Running Hassio 0.9.2
This is a direct copy of my card from the lovelace file:
- CalEventHolidayColor: red
CallEventIcon1: 'mdi:account-alert'
CallEventIcon2: 'mdi:account-alert-outline'
CallEventIcon3: 'mdi:flag'
dateColor: black
dateFormat: 'dddd, MMMM Do'
dateSize: 90
dayWrapperLineColor: black
defaultMode: 1
dimFinishedEvents: true
enableModeChange: true
entities:
- color: red
entity: calendar.<your calendar>
type: icon3
- entity: calendar.<your calendar>
type: holiday
- color: red
entity: calendar.<your calendar>
type: icon2
eventBarColor: blue
finishedEventFilter: grayscale(100%)
finishedEventOpacity: 0.6
firstDayOfWeek: 7
fullDayEventText: All day
locationIconColor: 'rgb(230, 124, 115)'
locationLinkColor: black
locationTextSize: 90
maxDaysToShow: 14
progressBarColor: blue
showColors: true
showCurrentEventLine: false
showDate: true
showLocation: true
showMonth: true
showProgressBar: false
timeColor: blue
timeSize: 90
title: Calendar
titleColor: black
titleSize: 100
type: 'custom:atomic-calendar'
untilText: UntilSorry for delays, too much work last weeks. Now I will work more on the component.
grangemd It’s not possible now, but no problem to add this option, I’ll do it in the next version, and some issues on github too.
Thank you GaryK but no success. I get the error “no type configured” and the text “custom:atomic-calendar” is marked with red in my configuration file.
I reckon that I still need the lines:
resources:
- url: /local/atomic-calendar.js
type: module
in my configuration file??
Yes. Add this to the top of the file:
resources:
- type: module
url: /local/atomic-calendar.jsDid that. Still same error and the text “custom:atomic:calendar” still marked with red.’
I think I have done everything correct about creating the directory /config/www and downloaded and placed the atomic-calendar.js in it.
I bit desperate
Using </> to format the text, put a copy of your entry so we can look at what you have.
