Sorry, I’m not trying to wind you up. This stuff can be frustrating.
The only thing that I can think of is you need to edit family_calendar.yaml BEFORE you place it in the /packages folder and restart HA.
This file is what creates the text helpers and scripts which allow the different calendars to be filtered on and off. If you install this first, restart and then edit it, the helpers and scripts will be wrong.
Your screen shot appears to be missing a big add event button that the family package has at the top, and the pop up option. One issue with manually copying and pasting eveything from the repo is you’re likely to end up missing something.
If you go to edit dashboard, is there some red box saying config error? You need the card mod, browser mod 2 and bubble card additions to your HA instance
My config is this, I though has obviously been configured to my family
card_type: button
button_type: name
card_layout: large
name: Add Event
icon: mdi:calendar-plus
tap_action:
action: navigate
navigation_path: "#addcalendarevent"
styles: >
* { font-size: 1.05em !important; }
ha-card { --bubble-main-background-color: #393745 !important; width: 300px;
}
.bubble-icon { --mdc-icon-size: 30px !important; color: snow !important;
opacity: 1; }
.bubble-icon-container { background: #393745 !important; display: flex; }
.bubble-name { color: snow !important; opacity: 1; display: flex; line-height:
18px; flex-direction: row; justify-content: center; flex-grow: 1; margin: 0
40px 0 0; pointer-events: none; position: relative; overflow: hidden; }
grid_options:
columns: 11
rows: 1
button_action:
tap_action:
action: navigate
navigation_path: "#addcalendarevent"
My config is this, though has obviously been customised for my tablet with sizing of everything. The screenshot is taken from my phone hence looking awful
That’s a good point. In the stock layout, it looks like this:
Ignore the dark theme, I just don’t use the Skylight theme on my desktop. This dashboard is destined for use on a wall-mounted tablet.
I built the dashboard from scratch by creating a card with the weekly planner card, and I didn’t do the add event buttons cards but I couldn’t figure out how to do the display for the events in the calendar to show correctly, so I went back and forth between doing this manually and copy pasting from my local file. Where I am now, I have tried copy-pasting the family_calendar helpers and scripts to a text file, modified it so I have every single reference to the people in Bob’s family to my family, including the names of the input filters, etc, and then I did the same thing for the dashboard, and copy-pasted the part that builds the calendar select view thing, AND the calendar, but both sections are completely blank, even in the preview.
If I could figure out the syntax for the helpers and the script(s) in the family_calendar.yaml that would allow me to progress further. Right now, my HA instance has no helpers at all, despite what I added via the family_calendar.yaml.
This is the code for the view selector:
"0":
type: grid
cards:
- type: vertical-stack
cards:
- type: markdown
content: " "
card_mod:
style: |
ha-card { background: none; box-shadow: none; border: none; }
grid_options:
columns: 18
rows: auto
grid_options:
columns: 120
rows: auto
- type: vertical-stack
cards:
- type: markdown
content: <font color="Black" size="6">Family Calendar</font>
grid_options:
columns: 18
rows: auto
grid_options:
columns: 120
rows: auto
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
button_type: state
entity: person.laura
show_icon: true
show_name: true
tap_action:
action: perform-action
perform_action: script.laura_calendar_visible_filter
styles: |
.bubble-button-background {
opacity: 1 !important;
background-color: ${hass.states['input_text.laura_calendar_filter'].state === '.*' ? 'light-grey' : 'var(--laura-default-primary-color)'} !important;
}
- type: custom:bubble-card
card_type: button
button_type: state
entity: person.kevin
show_icon: true
show_name: true
tap_action:
action: perform-action
perform_action: script.kevin_calendar_visible_filter
styles: |
.bubble-button-background {
opacity: 1 !important;
background-color: ${hass.states['input_text.kevin_calendar_filter'].state === '.*' ? 'light-grey' : 'var(--kevin-default-primary-color)'} !important;
}
- type: custom:bubble-card
card_type: button
button_type: state
entity: person.nolan
show_icon: true
show_name: true
tap_action:
action: perform-action
perform_action: script.nolan_calendar_visible_filter
styles: |
.bubble-button-background {
opacity: 1 !important;
background-color: ${hass.states['input_text.nolan_calendar_filter'].state === '.*' ? 'light-grey' : 'var(--nolan-default-primary-color)'} !important;
}
- type: custom:bubble-card
card_type: button
button_type: switch
name: Family
icon: mdi:human-male-female-child
show_icon: true
show_name: true
tap_action:
action: perform-action
perform_action: script.family_calendar_visible_filter
styles: |
.bubble-button-background {
opacity: 1 !important;
background-color: ${hass.states['input_text.family_calendar_filter'].state === '.*' ? 'light-grey' : '#4A90E2'} !important;
}
entity: input_boolean.family_calendar_show
- type: custom:bubble-card
card_type: button
button_type: name
name: Birthdays
icon: mdi:cake-variant
show_icon: true
show_name: true
tap_action:
action: perform-action
perform_action: script.birthdays_calendar_visible_filter
styles: |
.bubble-button-background {
opacity: 1 !important;
background-color: ${hass.states['input_text.birthdays_calendar_filter'].state === '.*' ? 'light-grey' : '#33a02c'} !important;
}
- type: custom:bubble-card
card_type: button
button_type: name
name: Holidays
icon: mdi:bag-personal
show_icon: true
show_name: true
tap_action:
action: perform-action
perform_action: script.holidays_calendar_visible_filter
styles: |
.bubble-button-background {
opacity: 1 !important;
background-color: ${hass.states['input_text.holidays_calendar_filter'].state === '.*' ? 'light-grey' : '#ff7f00'} !important;
}
grid_options:
columns: 45
rows: auto
- type: markdown
content: " "
grid_options:
columns: 3
rows: auto
- type: custom:bubble-card
card_type: button
button_type: name
card_layout: large
name: Add Event
icon: mdi:calendar-plus
tap_action:
action: navigate
navigation_path: "#addcalendarevent"
styles: >
* { font-size: 1.05em !important; }
ha-card { --bubble-main-background-color: #393745 !important; width:
300px; }
.bubble-icon { --mdc-icon-size: 30px !important; color: snow !important;
opacity: 1; }
.bubble-icon-container { background: #393745 !important; display: flex;
}
.bubble-name { color: snow !important; opacity: 1; display: flex;
line-height: 18px; flex-direction: row; justify-content: center;
flex-grow: 1; margin: 0 40px 0 0; pointer-events: none; position:
relative; overflow: hidden; }
grid_options:
columns: 10
rows: 1
- type: custom:bubble-card
card_type: select
entity: input_select.calendar_view
show_name: true
show_state: true
name: Select View
show_last_changed: false
show_attribute: false
column_span: 10
Then the code for the calendar section is:
"0":
type: grid
cards:
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: pop-up
hash: "#addcalendarevent"
button_type: name
name: Add Calendar Event
icon: mdi:calendar-plus
show_icon: true
show_name: true
styles: |
.bubble-button-card-container {
background:
${hass.states['input_select.calendar_select'].state == 'Laura' ? 'var(--laura-default-primary-color)'
: hass.states['input_select.calendar_select'].state == 'Kevin' ? 'var(--kevin-default-primary-color)'
: hass.states['input_select.calendar_select'].state == 'Nolan' ? 'var(--nolan-default-primary-color)'
: hass.states['input_select.calendar_select'].state == 'Family' ? 'var(--family-default-primary-color)'
: 'gray'} !important;
}
- type: vertical-stack
cards:
- type: entities
entities:
- entity: input_select.calendar_select
- entity: input_text.calendar_event_title
name: Event Title
- entity: input_text.calendar_event_description
name: Event Description
- entity: input_boolean.calendar_all_day_event
name: All Day Event
title: Add Calendar Event
state_color: false
- type: conditional
conditions:
- entity: input_boolean.calendar_all_day_event
state: "off"
card:
type: entities
entities:
- entity: input_datetime.calendar_event_start
name: Start Time
- entity: input_datetime.calendar_event_end
name: End Time
- type: conditional
conditions:
- entity: input_boolean.calendar_all_day_event
state: "on"
card:
type: entities
entities:
- entity: input_datetime.calendar_day_event_start
name: Event Start Date
- entity: input_datetime.calendar_day_event_end
name: Event End Date
- type: custom:button-card
name: Add Event to Calendar
tap_action:
action: call-service
service: script.add_google_calendar_event
styles:
card:
- background-color: |
[[[
if (states['input_select.calendar_select'].state == 'Laura') return "var(--laura-default-primary-color)";
if (states['input_select.calendar_select'].state == 'Kevin') return "var(--kevin-default-primary-color)";
if (states['input_select.calendar_select'].state == 'Nolan') return "var(--nolan-default-primary-color)";
if (states['input_select.calendar_select'].state == 'Family') return "var(--family-default-primary-color)";
return "gray";
]]]
Have you added the references in your configuration.yaml file so HA knows the package is there? Then restarted HA
packages: !include_dir_named packages
and
frontend:
themes: !include_dir_merge_named themes
(full syntax of the in the installation instructions in the github repo at the top of this discussion)
Other thing that tripped me up, have you renamed the variables that are setting your colour per person in the skylight theme file? Ie does “–laura-default-primary-color” actually exist as a refernce
Go to the default calendar dashboard of home assistant (you may need to go settings → dashboards to configure it to be easily viewable) and see if that is showing the events from the other calendars. This can help debug whether it’s a skylight dashboard issue or a home assistant:3rd party calender e.g Google issue.
Not sure this calendar will do that… You might want to try atomic calendar revive on HACS if that is what you are looking for. A lot of that ones basic configuration is via the UI rather than yaml, which might help if that is more difficult for you.
Yes, packages directory is listed in the configuration.yaml and then reloaded. I then removed the configuration and rebuilt the configs for family_calendar.yaml from scratch, including creating the references I have in the dashboard.yaml, then reloaded HA. What I don’t understand, I still don’t have any helpers in my current configuration, whether that the input filter, or the scripts.
As for the part about the calendar events not showing “properly”, what my wife wants is that things that are concurrent would show as concurrent on this calendar, just like they do with the Skylight, I think. Like, in the current original google calendar, concurrent events just don’t show as concurrent, or partly overlapping, and that is what my wife wants.
Hi,
Thanks for this. It is awesome!
I had followed the instructions on GitHub to put in the necessary files.
I do encounter two issues:
That spinning circle in the bottom right indicates that you possibly did not update all the weather entities. There is one in the calendar itself that you should check.
Oh my… thanks for this. I didn’t catch the one in Calendar itself.
Wow! Got it working!
Understand your views it goes by moving date meaning current date and display next 30 days.
Anyway to display per month ?
I haven’t looked into that, I’m afraid. We would need the OP to answer that.
Hi,
I manage to find out.
Can tweak the below:
To fix a starting day for the calendar to display Week starting Monday: startingDay: monday
To display whole Month: startingDay: month
To show Navigation Bar: showNavigation: true
I am using Black background, need some advise on how to utilise Black Background for Skylight.
Once I changed the black background RGBA, the following don’t really display out.
Alice, Bob, Charlie, Daisy’s colour and events doesn’t seems to work.
Birthday button works but Birthday Events do not show the colour.
Another issue I encounter is I want to change from Local Calendar to Gmail.
I had updated the Calendar Map for my email to Bob’s but it still doesn’t pull the information. Verified with Calendar App in Home Assistant that data is in and is syncing with Gmail API. Not sure if I had missed out any else where to change.
@J-S-LIM This is kinda the same thing that was happening for me: I was customizing my .yaml files for my family and in the process, breaking them. For me, I’m trying to manually rebuild what Bob did, but I haven’t yet figured out the helpers correctly, nor have I figured out the input_text.calendar.filters and the variables for the view selector thing.
I also, for whatever reason, get nothing to work for add events to calendars bit, but once I figure out why the other parts don’t work, I’m sure I can figure that out too.
This is what my current view looks like for me; just in 50% view so you can see it in a single screenshot.
Am i only one where default dashboard.yaml dont work at all? it errors
I did get another version working but want to use one from github
Nope, this was the very first thing that I had going wrong. I forget what I had to do to fix it other than clearing the yaml from the section and removing the view piece from that section and then trying to readd the yaml configs for that section again without the view.
hows yours looking? can you share the working dashboard code? Mine is working but not code from github
Figuring it all out… seems documentation is somewhat outdated? indent everything in dashboard code and add this to top. title: My Skylight Calendar
views:
