How can I show multiple calendar events same day in a lovelace card?

Share your Projects! Dashboards & Frontend
1

Hi.

I want to transfer my wall display from MagicMirror2 with MMM-CalendarExt2 to a Home-Assistant Lovelace interface with a big calendar.

But I can’t find a way to present it in a good way. Look at April 7th, that one has two events. It is showing in the side-bar-calendar, but not in lovelace-calendar-card. ("+2 more" is not very useful in a wall-display)

But I also don’t want to show the “My Calendars” on the screen, that is space-consuming and I have no use for i in this setting. So how can I get a full calendar in lovelace? I have also tried Atomic Calendar Revive, but that one is not displaying any events by text.

cl
cl1920×1200 176 KB
ll
ll1920×1160 100 KB

2

You could use separate entities for each calendar event and display it however you want.

3

Not exactly what I want. I don’t want a “next events” view, I want a full month calendar with events inside.

image
image1920×1200 378 KB

Not sure if any of these are usable to make a beter view?
JS Path document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-calendar").shadowRoot.querySelector("ha-app-layout > div > ha-full-calendar").shadowRoot.querySelector("#calendar > div > div > table")
Full XPath /html/body/home-assistant//home-assistant-main//app-drawer-layout/partial-panel-resolver/ha-panel-calendar//ha-app-layout/div/ha-full-calendar//div[2]/div/div/table

4

Use:

  - title: Calendars
    icon: mdi:calendar-clock
    cards:
      - type: calendar
        title: Calendar
        show_header_toggle: false
        entities:
          - calendar.name_of_your_calendar
          - calendar.name_of_your_calendar
5

That one did not make any difference

6

This one is still an issue

7

Hello Flemmingss

Did you fnd a solution to this ?

I’m struggling with the same issue, simply too few customization possibilities, and for me the Atomic revive is also not an option, as it doesn’t show text.

/Michael

8

Nop, still no solution

9

Hi, I think the addon I just released might help you, it will give you a sensor that contains all calendar events. See my post: 📅 Calendar Add-On + some calendar designs

It’ll be up to you to design the card as you wish. Custom button card is great if you’re ok with writing your own html+javascript. But a simple markdown card containing HA templates would also be a possibility.

10

hmm. in all the examples I don’t se any days with more then one event, sure is it possible?

11

My addon will give you the raw data of all your events in a sensor, so yes.
But like i said rendering that data will be up to you. The examples give some insight in how to deal with the data, but are not tailored to your issue. Though the code of my next events for a person button card example would render multiple events for one day without changing any code.

You need to get to grips with either javascript or Home Assistant’s ninja templating syntax , which can be daunting if you have no past experience in either, in order to really present the data on a card exactly how you want it.

12

I want to do this also.

@kdw2060 installed your addon which looks awesome, just need to figure out how to code this now :).

Ideally I’m looking for a 4 or 5 week calendar starting with current week, showing multiple events per day

Has anyone done this yet?

13

I have not found any solution yet, still very interested to have this.

14

Hi guys, sadly I do not have the time to write the code for you, but it shouldn’t be that hard if you have a little web-development experience.

Basically you’d make two calendar sensors with my add-on, then make a custom button card where you iterate over the sensor data in two loops with some javascript, placing the calendar events inside an html-template. For that template you could probably fall back on all kinds of pre-made designs that can be found on Github or Codepen.

15

Im not in to the coding, sadly… Any easy way for me to view more than one event in the dashboard calendar?

16

Hi. Did you find out how to do this?

17

Not found any solution yet.

18

I did it like this with a panel:

initial_view: listWeek
type: calendar
entities:
  - calendar.example_gmail_com
card_mod:
  style:
    ha-full-calendar:
      $: |
        #calendar {
          min-height: 90vh !important;
        }

This will fix the height I issue you were talking about.