Add Create Event Button to calendar card

Hi.
I would like to use the button to add a new event from the calendar integration in my smartphone dashboard @ the calendar card. At the moment I solved the problem by adding a link to the calendar @ the sidebar, but because it is not a subview, there is no back button.

Please update the calendar card.

Thanks a lot.

You can use the Add to Calendar button on your website to allow users to easily add events to their calendars. When users click this button, they can select their desired calendar (such as Apple Calendar, Google Calendar, Outlook, or Yahoo Calendar), and the event will be added seamlessly.

But this I can only find at The calendar Integration in The left side.
I would Like to have this Button on the calendar Card.

2 Likes

Same issue here (for a long time already)…Ironically the Calendar item in the sidebar is exactly what I want in my dashboard including the Add Event button.

Also tried to add the calendar item in the sidebar to a webpage card on my dashboard but the layout screws up big time so that’s no option.

So I can only try to look up to the HA Gods and hope they will fulfill this request :joy:

My Goal is to setup a usefull dashboard for my family which shows the events of this week so nobody forgets anything (and it raises the will to use HA dashboard enormously too :grin:)

4 Likes

I wish I could find the code for that button. It just seems to pop up a card with fields to enter, and then the submit on there actually creates the event. I’d just like to copy it!

1 Like

This is exactly what we need!

The ability to do an action to “Calendar: Create event”, where the event creation can be done in an overlay that opens up.

That would make it possible to create event without leaving HA and without the inconsistency of leaving the default dashboard to go to the calendar with no obvious way back.

Try this:

I modified it a bit for my purposes, but this is a good base.

hey @mattat - Complete HA noob here, just starting to dabble with integrations, entities, and cards, etc

I added the Google Calendar integration and I’ve been searching for a way to create an event, without needing to use the sidebar.
Can you confirm that this is what this script/card combi does?

Yes, you don’t need to use the Sidebar dashboard at all. I did as I put it all in an expanding section and didn’t want it to move all the other cards around when it opened up, but it should work anywhere except in a pop-up (because when you want to pick a date is uses a pop-up and which replaces your pop-up, which does not come back).

Thanks so much for your response @mattat - can you assist me a bit further please?

How would I utilise the Google Calendar google.create_event and how would I “add it”? Sorry, but as I say, I’m a complete noob!

You will need to do a fair bit of research as stuff breaks occasionally and if you don’t know how it works you will forever hate Home Assistant. If you follow along with what I did and reseach a bit on each part that might be new/different you’ll get the hang of it. It took me at least a week to work everything out to do exactly what I wanted, but Chat GPT can help identify code errors, etc (but I think Claude is better , or at least presents responses better).

I know nothing about how you have set anything up, or whether you even know how to add a new dashboard and button. Most people will expect you to provide some basic background and example of the relevant parts of your code/page to be able to help you, so you’ll have to work out how to apply the below in your situation, but try to follow each part and do some research into everything that is new to you to understand how it works and the available settings I may or may not have used.

You need to add a card to a dashboard (I used a custom expander card in the below example) and use/modify the below yaml in the code editor of the card. You will need to change it to suit the card you add it to by changing the type and a lot of the specific card attributes, or just use an expander card (follow the installation instructions at the above link). My card looks like this:

You also have to set up the helper entities (add them in Settings => Devices & Services => Helpers - Create Helper Button - Text for input_text, etc.). I added input_select.calendars because I have several calendars displayed and wanted to be able to add events to the right calendar.

If you include the “card_mod” sections below you will need to add this custom repo too - follow the install instructions. Or just delete those sections - it can be a struggle to change the right thing with it if you don’t research it enough.

I also used a custom button card, which I got from @iamdabe (you might want to delete the lock section, or use it differently to me).

type: custom:expander-card
child-margin-top: 0.6em
padding: 0
title-card-clickable: true
clear: false
expanded: false
expander-card-background: rgba(0, 0, 0, .8)
expander-card-background-expanded: rgba(0, 0, 0, .8)
title-card:
  type: heading
  heading: Create Event
  icon: mdi:calendar-outline
cards:
  - type: vertical-stack
    cards:
      - type: entities
        entities:
          - entity: input_text.event_title
            name: Name
          - entity: input_text.event_description
            name: Description
          - type: section
            label: Start/End Date
          - entity: input_datetime.event_start
            name: " "
          - entity: input_datetime.event_end
            name: " "
          - entity: input_boolean.event_allday
            name: All Day Event?
          - entity: input_text.event_location
            name: Location
          - entity: input_select.calendars
        show_header_toggle: false
        state_color: false
        card_mod:
          style: |
            ha-card {
              background-color: transparent !important;
            }
      - type: custom:button-card
        name: Create Event
        lock:
          enabled: |
            [[[ return states['input_text.event_title'].state === ''; ]]]
          exemptions: []
        card_mod:
          style: |
            ha-card {
              background-color: transparent !important;
            }
        styles:
          card:
            - margin: 0
            - padding: 0
          grid:
            - grid-template-areas: "\"i n\""
            - grid-template-columns: min-content 1fr
            - grid-template-rows: min-content min-content
          name:
            - align-self: center
            - font-weight: normal
            - margin: 10px
            - justify-self: center
        tap_action:
          action: fire-dom-event
          browser_mod:
            service: browser_mod.popup
            data:
              title: Confirm adding event
              content: >-
                Are you sure you wish to add this new event to the family
                calendar. It may take up to 15 minutes to sync to this view.
              right_button: "Yes"
              left_button: "No"
              right_button_action:
                service: script.create_calendar_event
              left_button_action:
                service: browser_mod.popup
                data:
                  title: Operation cancelled.
                  dismissable: false
                  timeout: 500

You then need the script, like @iamdabe but mine is modified a little so you need to ensure the script aligns with your card set-up.

create_calendar_event:
  alias: Create Calendar Event
  sequence:
    - condition:
      - "{{ states('input_text.event_title') != '' }}"
    - if:
      - condition: state
        entity_id: input_boolean.event_allday
        state: 'on'
      then:
          - action: google.create_event
            metadata: {}
            target:
              entity_id: >
                {% if (states('input_select.calendars') == "Person 1 Diary") %}
                  {{ "calendar.YOUR CALENDAR ENTITY 1" }}
                {% elif (states('input_select.calendars') == "Person 2 Diary") %}
                  {{ "calendar.YOUR CALENDAR ENTITY 2" }}
                {% else %}
                  {{ "No Diary Selected" }}
                {% endif %}
            data:
              start_date: >
                {% set _start = states('input_datetime.event_start')|as_datetime %}
                {% set x = _start.strftime("%Y-%m-%d") %}
                {{ x }}
              end_date: >
                {% set _start = states('input_datetime.event_start')|as_datetime %}
                {% set _end = states('input_datetime.event_end')|as_datetime %}
                {% if (_end > _start) %}
                  {% set _end = _end+timedelta(days=1) %}
                  {% set x = _end.strftime("%Y-%m-%d") %}
                  {{ x }}
                {% else %}
                  {% set _end = _start+timedelta(days=1) %}
                  {% set x = _end.strftime("%Y-%m-%d") %}
                  {{ x }}
                {% endif %}
              summary: "{{ states('input_text.event_title') }}"
              description: "{{ states('input_text.event_description') }}"
              location: "{{ states('input_text.event_location') }}"
      else:
          - action: google.create_event
            metadata: {}
            target:
              entity_id: >
                {% if (states('input_select.calendars') == "Person 1 Diary") %}
                  {{ "calendar.YOUR CALENDAR ENTITY 1" }}
                {% elif (states('input_select.calendars') == "Person 2 Diary") %}
                  {{ "calendar.YOUR CALENDAR ENTITY 2" }}
                {% else %}
                  {{ "No Diary Selected" }}
                {% endif %}
            data:
              start_date_time: >
                {% set _start = states('input_datetime.event_start')|as_datetime %}
                {% set x = _start.strftime("%Y-%m-%dT%H:%M:%S") %}
                {{ x }}
              end_date_time: >
                {% set _start = states('input_datetime.event_start')|as_datetime %}
                {% set _end = states('input_datetime.event_end')|as_datetime %}
                {% if (_end > _start) %}
                  {% set x = _end.strftime("%Y-%m-%dT%H:%M:%S") %}
                  {{ x }}
                {% else %}
                  {% set _end = _start+timedelta(minutes=30) %}
                  {% set x = _end.strftime("%Y-%m-%dT%H:%M:%S") %}
                  {{ x }}
                {% endif %}
              summary: "{{ states('input_text.event_title') }}"
              description: "{{ states('input_text.event_description') }}"
              location: "{{ states('input_text.event_location') }}"

    - target:
          entity_id: input_boolean.event_allday
      data: {}
      action: input_boolean.turn_off
    - target:
          entity_id: input_text.event_title
      data:
          value: ''
      action: input_text.set_value
    - target:
          entity_id: input_text.event_description
      data:
          value: ''
      action: input_text.set_value
    - target:
          entity_id: input_text.event_location
      data:
          value: ''
      action: input_text.set_value
    - target:
          entity_id: input_datetime.event_start
      data:
          datetime: '{{ now() }}'
      action: input_datetime.set_datetime
    - target:
          entity_id: input_datetime.event_end
      data:
          datetime: '{{ now()+timedelta(minutes=30) }}'
      action: input_datetime.set_datetime
  description: ''

Note that all this just adds an event to a Google calendar, it does no display your calendar. To do that I’d suggest looking into custom:week-planner-card.

3 Likes

Thanks for the reply @mattat - it seems a lot for simply being able to add a bloody event :slight_smile: I can do this easily if I was willing to allow my users to use the sidebar and go to the calendar integration - unfortunately I want everything triggered from the dashboard.

I suppose I just need a simplified version of your setup to have a form present on press of a button, that users fill in, then commit, to use the google.create_event call?

Yes, given that HA has the calendar and event button you’d think it should be simpler.
Basically you need a card with the inputs, a button and a script to call the event with all the input data. Cards and buttons can be fancy or basic, but the minimum to function would be 90% of what I used.

Good Luck

I’ve actually managed to create it this afternoon after a little play. Took a bit longer than expected but there we are!
I’m now investigating how to call another script to “zero” the card inputs, and do a refresh.

Thanks for your help

No problem. The bottom half of the script above clears the input after submitting the event data.

1 Like