Lovelace: Advanced calendar card

[atomic77]

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.

So, if anyone wants to try it, it’s here https://github.com/atomic7777/atomic_calendar

[GaryK (Gary Kelley)]

Got this:

http://192.168.3.135:8123/local/atomic-calendar.js?v=0.3.1:417:4 SyntaxError: illegal character 9:48 AM components/system_log/__init__.py (ERROR)

Hass-io v0.87.1

[atomic77]

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…

[finity]

is this the same as the latest release that you have posted in the other (rdehuyss) calendar-card thread just now in your own maintained repo?

can i swap out the other card with this card and keep the same config?

[atomic77]

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:

• url: /local/atomic-calendar.js?v=0.5.5
  type: module

and a simple card:

• type: “custom:atomic-calendar”
  title: “Calendar”
  entities:
  • entity: calendar.name
    color: red

[GaryK (Gary Kelley)]

So I tried again. This time without the moment.js resource. Here’s what I get now:

http://192.168.3.135:8123/static/webcomponents-bundle.js:203:228 Error: A custom element with name 'atomic-calendar' has already been defined.

A card with the title Calendar appears, but without contents.

[atomic77]

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 ?

[GaryK (Gary Kelley)]

Firefox 61 on Windows 10.

Resource from lovelace .storage:

{
    "data": {
        "config": {
            "resources": [
                {
                    "type": "module",
                    "url": "/local/atomic-calendar.js?v=0.3.1"
                }
            ],

Card config:

                {
                    "entities": [
                        {
                            "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"
                }
            ],

Tried both key combinations to reload.

[finity]

I just tried your card and for the most part it’s working pretty well. Except…

I can’t get the date divider line to change colors. It’s always black. I even tried to define it explicitly as white and it still shows black:

here is my config:

  - type: "custom:atomic-calendar"
    title: "Calendar - Atomic77"
    showProgressBar: false
    showCurrentEventLine: false
    maxDaysToShow: 14
    dayWrapperLineColor: white
    titleSize: 110
    showMonth: true
    locationIconColor: '#f44242'
    locationlinkColor: '#B58E31'
    entities:
      - calendar.mycalendargmailcom

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.

[atomic77]

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

[finity]

Oh, and I just noticed one more small thing.

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.

EDIT to add: I’m not using hassio either.

[GaryK (Gary Kelley)]

Here’s what i get:

[finity]

yeah, that’s what mine looks like too but if you look at the other cards it’s a bit off

[GaryK (Gary Kelley)]

Swapped in your latest. The result:

Sorry, copy error on js file. Still just the card with no contents.

[atomic77]

OK. New version, 0.6.0, hope it fix some things.

• Some alignment changes
• 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)

[GaryK (Gary Kelley)]

Progress!

[NeoID]

@atomic77

Hi, I know there are hundreds of calendar cards for Home Assistant with Lovelace

Really? I know only of two or so and they are both not/barely maintained with a lot of bugs. Your project and sharing is really welcome!

[finity]

Thanks for the update!

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!

[GaryK (Gary Kelley)]

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.

[finity]

And one other thing now that i’m thinking of it…

For some reason the card isn’t being added to the tracker card.

I’ve added the version number to the end of the resource entry and my understanding that was all that was necessary for it to be added.

Am I mistaken on that or is it something else?