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.