Add event button on dashboard

Configuration Frontend
1

So we have that nice calendar view with the Add Event button at bottom right corner.
Is it possible to add this button (or an equivalent that open the same pop-up) to the dashboard ?

2

Two options:

A) Use calendar card and the options it provides.
B) If you are happy tinkering you can UIX Broker, part of UIX to handle a custom event and do the neccessary to show the dialog anywhere.

Option B - UIX Broker:

As both the calendar element (ha-full-calendar) is lazily loaded you need to load with a code task. The best way is with UIX Broker with a listener for ll-custom (fire-dom-event action) and then you can put use any Frontend element that accepts actions (even UIX Broker UI elements if you want).

Below is the UIX Broker interaction. Either place in UI config in UIX Broker in uix, below uix_broker: or place in a file under uix_broker and register that file.

  - realm: browser
    listen: ll-custom
    debug: false
    anchor: "&home-assistant $$ partial-panel-resolver"
    rules:
      - "@captured.uix_create_event": true
    directives:
      - type: javascript
        id: uix-create-event-js
        code: |
          if (!window.customElements.get('ha-full-calendar')) {
            window.loadCardHelpers().then(helpers => {
              helpers.createCardElement({ type: "calendar" });
            });
          }
          const haShadow = document.querySelector("home-assistant").shadowRoot;
          window.customElements.whenDefined('ha-full-calendar').then(() => {
            let fullCalendar = haShadow.getElementById("uix-full-calendar");
            if (!fullCalendar) {
              fullCalendar = document.createElement("ha-full-calendar");
              fullCalendar.id = "uix-full-calendar";
              fullCalendar.style.display = "none";
              haShadow.appendChild(fullCalendar);
            }
            if (fullCalendar) {
              fullCalendar.hass = anchor.hass;
              // unset _activeView so _createEvent will work correctly
              fullCalendar._activeView = undefined;
              fullCalendar._createEvent();
            }
          });

Next: Use as action.

On any Frontend element that accepts an action…

type: button
name: Create Event
tap_action:
  action: fire-dom-event
  uix_create_event: true

Note:

  • This leaves a hidden ha-full-calendar in DOM under home-assistant shadowRoot to use again so the code does not have to always reload. Its needs to be under home-assistant so the resulting show-dialog is handled.
  • You could do this with custom:button-card and its javascript action, you would need to do a bit of querySelector chaining to get anchor which is the partial-panel-resolver element that has the info to load the calendar panel and hence ha-full-calendar. UIX Broker makes it easy as the anchor uses express search selector to do this with an easy config.

Sep-26-2026 17-18-40

3

Option A would have been my favorite, but the calendar card does not provide a button or something else to add a new event.
Option B seems too complicated.

Thanks anyway.

I ended up with creating a pop-up card with text and datetime inputs and a script, that uses the inputs to create a new event.

4

I had not realised this was new to the dev version I am using. Look forward to this in the next release.

It’s always good to share your solution back here for others to learn how you solved.

5

Found it here: