Lovelace: Advanced calendar card

I am looking to beable to view the calendar so that I can see the next future weeks . My current google calendar will show the entire month so if its the last week of the month; i cant see the future but the last three weeks which i dont care to see. any ideas how to make this happen?

Look at the example just above your question. There you can specify the amount of days in the future, you want to see. No history is displayed.

Hey,

is it not possible anymore to change the locationLinkColor ?

that made it work, thanks!

1 Like

Does anyone have experience using cardmod to make the calendar view larger. I’m using it on a 10.5 in tablet and when i use this code the font definitely gets bigger, but its no longer centered in the squares of the calendar and the border-radius of the div class “calDay currentDay” doesnt change so the oval highlighting the current day is only covering 70% of the date number.

card_mod:
  style: |
    ha-card {
      font-size: 26px;
    }

Hi,

I can’t figure this out? The calendar is showing past events that happened on Friday as todays (Saturday) events? I don’t want to show past events?

Do those events end that same day, or extend to the next day?

It’s all day event, only friday.but still shows up saturday

Thanks @atomic77 for this outstanding card.

I’m struggling with the blocklist option. I’m trying to filter calendar events like “Wife at work” but the regex

blocklist: (Wife at work)

doesn’t filter anything.

I also tried the following without success:

blocklist: “(Wife at work)”
blocklist: ‘(Wife at work)’
blocklist: Wife at work
blocklist: (Wife|at|work)

Any type of quotation marks will be removed from the card editor anyway.

Can you please explain how I can get rid of these recurring events in our daily schedule?

Ok… so I’m sure this is an obvious one and I’m just being blind! But how do I set the text size of the calendar entries?

I have the following lines configured, but I can’t change the size of the entry name itself (I had assumed that was what titleSize set), nor the location text.

Thanks for your help/advice!

dateSize: 120
timeSize: 120
locationTextSize: 150
titleSize: 150
descSize: 150

Can someone help me figure out how to make the card have a transparent background? Sorry for my ignorance.

I have tried using the card mod (however I think my formatting is wrong). I have a blank png file saved that works for other cards.

type: custom:atomic-calendar-revive
entities:
  - entity: calendar.our_family_calendar
    name: Our family calendar
name: null
enableModeChange: true
firstDayOfWeek: 1
maxDaysToShow: 3
maxEventCount: 3
refreshInterval: 60
calShowDescription: true
showLoader: false
card_mod:
  style: |
    ha-card {
      background-repeat: no-repeat;
      background-image: url('/local/Dashboard-Backgrounds/Transparent-Background.png');
      background-size: 100% 100%;
    }

Hmmm I’m not sure why thats not working… It seems to be the same format as mine (below).

If you try another image, does that show up ok?

card_mod:
  style: |
    ha-card {
      background-repeat: no-repeat;
      background-image: url("/local/images/calendar.png");
      background-size: 100% 100%;
    }

New image, same results :man_shrugging:

Sorry, not sure what to suggest, my code above works for me.

Have you tried it without… background-repeat: no-repeat; as a test

Apologies for repeating my query, but any thoughts from anyone?

I have the following lines configured, but I can’t change the size of the entry name itself (I had assumed that was what titleSize set), I can’t change the location text either using locationTextSize

Full code below incase it helps more.

Thanks for your help and advice!

type: custom:atomic-calendar-revive
entities:
  - entity: calendar.shared_birthdays
    name: Shared Birthdays
    icon: mdi:cake-variant
    color: orange
  - entity: calendar.shared_calendar
    name: Shared Calendar
maxDaysToShow: 1
showCurrentEventLine: false
showProgressBar: false
showMonth: false
showWeekDay: true
showDescription: false
disableEventLink: true
disableLocationLink: true
showNoEventsForToday: true
showFullDayProgress: false
showEventIcon: true
showHiddenText: false
showCalendarName: false
showWeekNumber: false
dimFinishedEvents: true
firstDayOfWeek: 1
refreshInterval: 60
hideDuplicates: true
showMultiDayEventParts: false
showLocation: true
showMultiDay: true
showDate: false
sortByStartTime: true
hoursFormat: HH:mm
showLoader: false
showRelativeTime: false
showHours: true
cardHeight: 300px
noEventText: We have an empty day.... nothing planned!
dateSize: 120
timeSize: 120
locationTextSize: 150
titleSize: 150
descSize: 150
card_mod:
  style: |
    ha-card {
      background-repeat: no-repeat;
      background-image: url("/local/images/calendar.png");
      background-size: 100% 100%;
    }

So incase it helps anyone, I got this working using Card-Mod.

I removed the following options that I had tried to get working:

dateSize: 120
timeSize: 120
locationTextSize: 150
titleSize: 150
descSize: 150

and replaced them with this code:

card_mod:
  style: |
    .event-left {
      font-size: 20px !important;
    }
    .event-title {
      --event-title-size: 18px !important;
    }
    .event-titleRunning {
      --event-title-size: 18px !important;
    }
    .event-location {
      font-size: 16px !important;
    }
    .hoursHTML {
      --time-size: 14px !important;
    }

Below is my full code for context

type: custom:atomic-calendar-revive
entities:
  - entity: calendar.shared_birthdays
    name: Shared Birthdays
    icon: mdi:cake-variant
    color: orange
  - entity: calendar.shared_calendar
    name: Shared Calendar
maxDaysToShow: 1
showCurrentEventLine: false
showProgressBar: false
showMonth: false
showWeekDay: true
showDescription: false
disableEventLink: true
disableLocationLink: true
showNoEventsForToday: true
showFullDayProgress: false
showEventIcon: true
showHiddenText: false
showCalendarName: false
showWeekNumber: false
dimFinishedEvents: true
firstDayOfWeek: 1
refreshInterval: 60
hideDuplicates: true
showMultiDayEventParts: false
showLocation: true
showMultiDay: true
showDate: false
sortByStartTime: true
hoursFormat: HH:mm
showLoader: false
showRelativeTime: false
showHours: true
cardHeight: 306px
noEventText: We have an empty day.... nothing planned!
card_mod:
  style: |
    ha-card {
      background-repeat: no-repeat;
      background-image: url("/local/images/calendar.png");
      background-size: 100% 100%;
    }
    .event-left {
      font-size: 20px !important;
    }
    .event-title {
      --event-title-size: 18px !important;
    }
    .event-titleRunning {
      --event-title-size: 18px !important;
    }
    .event-location {
      font-size: 16px !important;
    }
    .hoursHTML {
      --time-size: 14px !important;
    }


3 Likes

Just came across this great card while researching how to set up an agenda card for my family members on my wall mounted dash. Thanks in advance for all the work put into this, in particular the great documentation.
That being said, I can’t seem to identify in documentation if I am able to use this card to display a full 24 hour (or other arbitrary lower number, say, the next 8 hrs) period, to include hours for which no event is scheduled.
The end result I’m looking for is 4 horiztonal-stacked cards to display information in this way:
---------Valmont---------Sara---------Jim-------Seth----
0800 —Event1----------------------Event1------------
0900
1000----Event2--------Event2
1100-------------------------------------------------Event3
1200 —Event4--------Event4-----Event4----Event4

I hope that made sense (and rendered the way I typed it)

Thanks!
Val

Is it possible to remove the ‘(in a day)’ , etc. entries ?

I was able to change the event title size using:

eventTitleSize: 150

Hello, congratulations for the great work. Now a query, when I click on a link it does not open the google calendar, it reopens HA, do I have to configure something?