Lovelace: Advanced calendar card

i’m a bloody muppet, that will learn me to do simple things with little sleep, cheers for your help, now how do I delete my post?! so embarrassing

1 Like

My apologies if I have missed the obvious. My default is calendar mode but is there a way to auto show today’s events below without having to click the date in the calendar mode? I have 2 entities for the 2 calendars set up and showing correctly with icons. Also do you think you will ever add a + icon that will call the service “google.calendar_add” from the card as opposed to opening another page _blank

Hey,

I have a feature request logged for making it display by default however haven’t got it working yet

I’m currently working on some compatibility issues with modern JS but once this is done I’ll be starting on the outstanding features.

I can look into the calendar_add button for you when I get a chance :relaxed:

1 Like

NEW VERSION v4.0.0

I have just released a new version of the Atomic Calendar Revive card, this new version provides a number of improvement. Due to the amount of change that has been made, you may experience new bugs that I haven’t seen in testing, however I aim to get these fixed as quickly as possible.

Full Release Notes

  • Replaces Moment with DayJS
  • Reduces size by 61.60%
  • Shows summary for current day by default
  • fixes bug with fireEvent causing build errors
  • Adds default icon in calendar mode if one is not specified
  • fixes bug in calendar mode where same icon with different colour only shows one icon
1 Like

The calendar will now only show 24-hour time format. I am not sure if this happened with the core 2021.6.1 update (which added the time format selection option) or if it happened with 4.0.0 of the calendar. I have my HA time format preferences set to 12-hour AM/PM but that is not having an impact on the time format in the calendar card.

This appears to have started since the latest release of HA 2021.6.3

I will log a bug and look into this when I get chance, I may be able to remove the option and use the HA setting instead

Does the card currently have an option for setting time format? I never noticed one

Yes it does, it was the only way to allow users to change the format prior to this latest update from HA.

Ok. I cannot find it in the documentation. Where is it? Am I just blind? Sorry

Edit: Found it under “Language Options”. My fault.

Hi @VMCosco,

I did some investigation and the configuration does seem to work as expected for time formatting:

using hoursFormat: 12h the time changes to be the correct format, you can also set a custom format if required hoursFormat: "HH:mm A"

I will however soon be changing this to use the new locale available with the latest HA Versions

hi there. I’m struggling to get the cardHeight function of this (otherwise excellent) card to work.

In the documentation it says to set the value to either a % or px, but changing this has no effect, the card always remains at full height no matter what value i set.

What i’m trying to achieve is to lock the card to a certain height so that it fits nicely on my smaller display tablet (iPad Mini) and then allows for scrolling if the list of events exceeds the height of the card.

Has anyone had any success with this? is it possible that because i have this card inside a swiper-card that could be causing the issue?

If you set the option cardHeight then refresh the page it should update.

I’ve just tested on my browser and it is working as expected with the latest version of the card.

It does appear that using % doesn’t work. Im not sure this could be resolved so best to use px instead.

thanks for the reply! refreshing seems to work if I use the card on its own, however, inside of a swiper-card things seem to be behaving badly. the calendar displays a very small sliver that is scrollable, but altering the cardHeight value doesn’t change the size. screenshot attached for reference:

hmm, i think i managed to sort it. turns out i needed to use some CSS styling from card-mod to get rid of the scrollbar and then it really was a case of refreshing things on each of my dashboards.

this is what the yaml looks like for anyone else looking to achieve something similar :slight_smile:

type: 'custom:swipe-card'
parameters:
  scrollbar: null
  hide: false
  draggable: true
  snapOnRelease: true
  autoplay:
    delay: 7000
    disableOnInteraction: false
  speed: 1000
cards:
  - type: 'custom:atomic-calendar-revive'
    name: Upcoming
    enableModeChange: true
    entities:
      - entity: calendar.family
    firstDayOfWeek: 1
    maxDaysToShow: 60
    showDate: true
    showLocation: false
    showCurrentEventLine: false
    showMonth: true
    showDescription: false
    showProgressBar: false
    showWeekDay: true
    cardHeight: 200px
    style: |
      ha-card {
        overflow: scroll;                            
       }

      ha-card::-webkit-scrollbar {
        display: none;
       }

Nice, I assume it’s the swipe card that messes with the card, I have only tested it by itself.

Hello, I was wondering if there was a way to edit the calendar to show only this week and next, also is there a way to show the events on the calendar directly?

similar to how I have the DAKboard setup. (there were no events on those weeks)

Thanks for all your hard work!

Did you find a way? Looking for this too

Hello All,
I haven’t posted in a while, however since my last post there have been quite a few changes to the card see below for updates:

v5.1.0

  • Added new option hideDuplicates this will hide any duplicate events that match summary, start time and end time

v5.0.0 - BREAKING CHANGE

  • Added feature to set time formatting from user profile, hoursFormat option no longer required unless you want a custom format for the card
  • Added Slovenian locale
  • Build dependencies updated

v4.11.1

  • Added Danish Locale
  • Build dependency updates

v4.10.1

  • Added new locale.language which was recently added to HA, this means the language option will no longer be required and is optional
  • Fixes bug with language settings
  • Fixes bug with descLength not showing events
  • Build dependency updates

v4.9.0

  • Added Slovak Locale

v4.8.0

  • Added Finish locale
  • Added Hungarian Locale
  • Added new option descLength which allows the description to be truncated
  • Multiple build dependency udpates

v4.5.0

  • Added Swedish locale

v4.4.2

  • Fixes bug where color was not showing on calendar entities

v4.41

  • Fixes bug where localisation was not working correctly

v4.4.0

  • Added new option locationWhitelist
  • Fixes bug where maxEventCount was not limiting in the correct order

v4.3.0

  • Added new option cardHeight to set how tall the card should show, this can be used to reduce the size adding a scroll bar
  • Fixes bug with Estonian translations

v4.2.1

  • Added Czech date language
  • Added new option showNoEventDays ability to show “No Events” on days without any events
  • Fixes a bug where calendar day headings are not moved

If you have any feature reuqests or issues please log them here

Not sure what is causing it but when I put atomic-calendar-revive in a grid card it overflows. Height is too large.

My solution, which I feel shouldn’t be necessary, is below:

style: |
      .cal-card { height: 90%; }

Enjoy.

Installed and very happy with it! Thank you very much!