Hi, I know there are hundreds of calendar cards for Home Assistant with Lovelace, but I wanted to try it myself. I’m rather new both to javascript and git, and this should be considered as experimental now, but I think it works well.
Last time I made a fork of rdehuyss’ calendar-card - so the look is very close, but it’s written from scratch.
I wanted to have more settings, libraries included etc. Still, I have a lot of improvements to do (like event progress, which I made before in that fork).
Update: Now the card has two modes: Event mode (first image) and Calendar mode (second image) with icons of events filtered by keywords . You can have both (clicking title will change mode) or only one, they don’t affect each other.
Thanks for feedback. I’ll try to look what happens, but it won’t be easy. I don’t get any errors, checked it in different browsers.
I would be grateful if anyone else test it…
No, not the same, it’s my own code, but it looks very similar. I just wanted to do it my way. And no more problems with the moment library. I want it to be more customizable, but I have still a lot to do.
The configuration is very similar, you can even try it in the same time as that one (it will load slower because getting the calendar from HA/Google is the bottleneck)
Just add this in your ui-lovelace resources:
Could you tell me what browsed you are using? It looks like it was loaded twice (never happened to me in CHrome, Firefox, Opera)
And the second thing - could you try to force reload with shift-F5 or Ctrl-Shift-R ?
And as a feature request would it be possible (or I guess, is it possible now) to show all day events as “All Day” instead of “time, until date” like the other card does?
And, lastly, I don’t know if it was a coincidence or not but after I added your card my custom tracker entries all showed “n/a” for the current values until I clicked the update button and then it went back to normal. So not really a big deal but I just thought I’d throw it out there in case anyone else encountered that too.
Thanks GaryK. It could be incompatibility with hass.io or some other card. I need to install hass.io aside from my current HA.
Anyways, I have new release 0.5.9 which is more compatible and even working in Edge, so if you could try in free time…
finity: thanks for testing. Now I will look at it, I still have a lot to fix with settings and look, margins etc
It looks like the spacing between the calendar title and the first event is a little squished compared to the other cards. it’s not bad but I think it would look better if it was consistent with the other cards.
Added a message “The calendar cannot be loaded…” when something is wrong with configuration in HA component. It shouldn’t be my component fault in this case, probably misconfigured entities or Google calendar in HA. Also, some errors goes to console (F12). But I’m still investigating.
Fixed some color settings
If you have some suggestions what I can improve, add, or change some things in the calendar look, let me know.
GaryK - if you could try one more time, and write if it shows some message under “Calendar” or in console
finity: do you still have “all day” events as “12:00 AM, until…” as I can see on your screenshot? If yes, there is some error I have to fix (it’s working here)
It looks like its working great now so far. The “All day” display is back again. And the colors and alignment look correct.
I have to say I’m impressed by looking at that massive wall of text in your code. There’s literally no way I could figure out how to find and fix any problems in there. So you don’t need to worry about me me fiddling around with tweaks. I’ll have to completely rely on you for updates!
While attempting to add additional calendars, some interesting things popped up:
In the configuration, if I remove the line indicated with an arrow, I get your message: The calendar cannot be loaded from the Home Assistant component.
- entities:
- entity: calendar.garyk
- entity: calendar.kelleycalendar
- entity: calendar.holidays_in_united_states
- dateColor: black
dateSize: 90
dayWrapperLineColor: black
dimFinishedEvents: 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: 7
progressBarColor: blue
showColors: true
showCurrentEventLine: false
showLocation: true
showMonth: false
showProgressBar: true
timeColor: blue
timeSize: 90
titleColor: black
titleSize: 100
untilText: Until
title: Calendar
type: 'custom:atomic-calendar'
Options for showMonth and maxDaysToShow when set to true and some number above 7, are not reflected in the card. I set an event 9 days out, changed maxDaysToShow to 14, then restarted HA. The event did not appear. If you’d rather I log these as issues in your repository, I can do that.
I’d also like to thank you for your work on this. Testing is the easy part.
of calendar cards for Home Assistant with Lovelace, but I wanted to try it myself. I’m rather new both to javascript and git, and this should be considered as experimental now, but I think it works well.
