Lovelace: Advanced calendar card

They appear just like the first screenshot i posted days ago. I mean with the border around them.

That is part of the new UI design to easily identify a full day event.

Hmmm what you mean?

Just installed but I am unable to get colors working for Event mode working.
Aren’t you just supposed to list it under the calendar name? Nothing happens when I add it, all calenders show up in the default blue. My config:

entities:
  - entity: calendar.xxx
  - entity: calendar.xxx
    color: green
  - entity: calendar.xxx
    color: orange
type: 'custom:atomic-calendar-revive'
showDate: false
showColors: true
showLoader: true
showWeekDay: true
showLocation: true
showDescription: true
sortByStartTime: true
maxDaysToShow: 3

Calendar color only applies to calendar mode. I’ll take a look and see the best way to add it to event mode.

This is my config:

          - type: custom:atomic-calendar-revive
            name: Calendario
            style: |
              ha-card {
                border-radius: 0px;
                font-family: Righteous;
                font-size: 1.4em;
                opacity: 0.68;
                overflow: hidden;
              }
            eventTitleSize: 60
            enableModeChange: true
            defaultMode: 2
            showProgressBar: true
            progressBarColor: blue
            showLastCalendarWeek: false
            calEventWeekendColor: 'rgba(245, 7, 7 .60)'
            calWeekDayColor: 'white'
            calDateColor: 'purple'
            calEventBackgroundColor: 'rgba(2, 6, 245, .5)'
            calEventHolidayColor: 'red'
            calEventSatColor: rgba(2, 250, 52, .35)
            calEventSunColor: rgba(2, 250, 52, .50)
            calGridColor: rgba(250, 245, 2, .35)
            calDayColor: 'orange'
            calActiveEventBackgroundColor: firebrick
            fullDayEventText: 'Tutto il giorno'
            untilText: 'Fino a'
            dimFinishedEvents: true
            finishedEventOpacity: 0.6
            finishedEventFilter: 'grayscale(100%)'
            dayWrapperLineColor: black
            calEventIcon1Color: "yellow"
            calEventIcon2Color: "green"
            calEventIcon3Color: "white"
            entities:
              - entity: calendar.contacts
                type: icon1
              - entity: calendar.festivita_cristiane
                type: holiday
              - entity: calendar.mauriziofabianigmailcom
                type: icon3
                eventCalName: 'Personale'
              - entity: calendar.inter_calendar
                eventCalName: 'Inter'
                type: icon3
              - entity: calendar.storia_ditalia
                eventCalName: 'Storia Italia'
                type: icon2
              - entity: calendar.festivita_in_italia
                type: holiday
            dateSize: 80
            timeSize: 100
            firstDayOfWeek: 1

And this is what i get:

Schermata 2020-06-04 alle 20.34.29

Hi,

I’m sorry I still don’t understand what you think isn’t working here, please explain in detail, it may be better to post on the GitHub issues page instead as it’s easier to track issues there.

Great, thank you! In the readme of the original atomic calendar one of the example pictures illustrates different colors so I guess it was availble before. I think it could have been called titleColor back then…

What i am trying to tell you is that you changed the way the list of daily events is shown… before it was really better, while now the events are bordered and some days ago you told me it was a bug…

Ok so events having a border is expected, that’s part of the new UI as stated above in one of my other posts.

When I stated there was a bug this was related to events being dimmed when they shouldn’t have been, which is now resolved.

Sorry for my beginners question
I followed those intructions : https://marksie1988.github.io/atomic-calendar-revive/quickstart.html
I’m losing my mind over this. I can’t make it work.

Here’s my error :
image

I added the javascript to the ressources :

The file is in the directory :
image

And here’s my Home Assistant version :
image

I use hass.io in a docker.
thank you for your help.

No problem everyone has to start somewhere. Welcome to the community :slightly_smiling_face:

You will need to update the line:

  • entity: calendar.YOUR_CSLENDAR_HERE

Change this to your calendar entity name in home assistant.

Thank you for your reply.

I was able to fix it. I had more than one problem.

1 - I had to fix the ownership of the file in my docker setup.
2 - I had to fix the entiy name. Like you propose.
3 - And also, I had to erease the cache of my browser.

now everything works fine.

I’m new to HA and this card (well done :slight_smile:) . I’m having trouble with the

disableEventLink: true

Clicking on the event still links to google calendar. Am I missing something? I’m setting up a touchscreen in kiosk mode and would like to avoid navigating away from HA. Thanks!

Hi,

I have a problem with my configuration.

I use 2 google calenders. One for national holidays and one for birthdays.

I have put this is my configuration:

maxEventCount: 10

But this is causing a problem because the 9th item in my calender is a holiday and it is only showing the birthdays (see left picture)

When i change the maxEventCount to 12 the first holiday is displayed (5 dec). But the second holiday (1st day of christmas) is missing. (see right picture)

So somehow it is not correctly matching the 2 different agenda’s. Or is this another parameter which i missed.

In this picuture ‘verjaardag’ means birthday and ‘feestdag’ means holiday

Somehow i have to increase the maxEventCount with 2 to show the missing holiday. Because i have to increas this value to 14 to show the first christmas day.

I also got problems with this calendar card but while reading this thread and the linked doc I stumble over a sentence:

…you need the google calendar component installed

Does this not work with my ical calendars? My calendars located on my NAS with CalDAV Baikal show up fine in HA. But there is a problem with this card. It only shows events all with the current date…?!!

Hey,

The card is only developed against Google calendars, however I’ve seen people have had success with other calendar types.

I don’t have any other Cal types to do testing with but if people could assist with development possibly we could change the card to work with most calendar types

Ok, a picture says more than 1000 words as we say in German ,)
Here is a screenshot of my calendar card. All installed in a haspian enviroment on my old Pi2. HA at V0.111 (the latest I think). Resource path:

/local/community/atomic-calendar-revive/atomic-calendar-revive.js?v=latest

card is recognized and displayed (already an achievement as most custom cards dont even show up)
Connected to my calddav calendar:

calendar:

But the content of the card:

since a few days I have this problem … it worked perfectly for months!
What could be the problem?

Capture

Sometime in the past couple of days, not sure if it is related to a theme change or a card change, but I cannot get the event title to show the theme default color or a custom color. I have used this in the card config: eventTitleColor: 'rgb(255,255,255)' and removed that code entirely. No matter what color I enter, I end up with this:
image

I have refreshed within HA, I have refreshed the browser, I have cleared the browser cache. Nothing.