Here is my take. It’s running on a tablet in the hallway. Family approved. 
2 Likes
Can someone point me in the direction I should look to see why I get “Configuration error” in the popup box when I click add event. I’ve redone the calendar a couple of times with all the helpers etc, but I get the same error.
1 Like
Looks nicke, can u share the code?
If anyone else if wondering if this would work with a CalDAV calendar other than google, i.e. Nextcloud, I’ve gotten it to work. The CalDAV integration is will not let you add events, but a simple rest command is all you need. See this thread to get started. If you go this route, its also possible to set a recurring event, and use event duration (instead of specifying both start and end times) while creating the event.
I struggled with this. The fix for me was to install “button-card” from Hacs.
1 Like
Thank you so much for sharing this, this is how my current dashbaord is looking, i am also using the 🏡 KidsChores – Family Chore Management Integration and was able to displays my kids points of the calendar, they look at the calendar and also their current points, they love it. I also added two of my front cameras so they can take a peak if someone is at the door.
5 Likes
@davidlop28 Would you mind sharing how you did the date range and navigation at the top? And are you using the week planner card? I am just starting to set up a family calendar using the week planner card but if you set it for a month view starting on a certain day of the week, and there are days spilling over from the previous month then it will display the previous month name at the top. For example I set the calendar to start on Mondays, and Sept 29 and 30 are the first two days shown and it says ‘September’ at the top even though the rest of the calendar is showing the month of October. Your solution would handle this situation.
Very nice! Would you mind sharing the code for the navigation bar and date range on the top?
Is there a way to colorize the background of a day according to an event?
(e.g. a different background if it is a holiday day)
Has anyone seen this behavior? When using the config-template-card, the card-mod does not apply? This is stripped down as the event background was the most important to get working.
type: custom:config-template-card
entities:
- input_text.calendar_filter_test
variables:
PERSONCALC: states['input_text.calendar_filter_test']?.state
VIEW: states['input_select.calendar_view']?.state
DAYS: |
(() => {
const calendarView = states['input_select.calendar_view']?.state;
if (calendarView === 'Tomorrow') return 2;
if (calendarView === 'Today') return 1;
// Check for Month, Biweek, or Week based on screen width
if (calendarView === 'Week') return 7;
if (calendarView === '2-Weeks') return 14;
if (calendarView === 'Month') return 28;
// Default fallback to 7 if no condition matches
return 7;
})()
card:
type: custom:week-planner-card
calendars:
- entity: calendar.test
name: Neave
color: "#ed87c4"
days: ${ DAYS }
startingDay: today
startingDayOffset: 0
hideWeekend: false
noCardBackground: false
compact: false
weather:
showCondition: true
showTemperature: true
showLowTemperature: true
useTwiceDaily: false
entity: weather.pirateweather_home
locale: en
showLocation: false
hidePastEvents: false
hideDaysWithoutEvents: false
hideTodayWithoutEvents: false
combineSimilarEvents: false
showLegend: false
grid_options:
columns: full
rows: 8
timeFormat: t
card_mod:
style: |
ha-card {
.event {
color: #333333 !important;
line-height: 16px !important;
background-color: var(--border-color) !important;
border-radius: 10px !important;
max-height: 80px !important;
overflow: hidden !important;
font-size: 1.1em !important;
}
type: custom:week-planner-card
calendars:
- entity: calendar.test
name: Neave
color: "#ed87c4"
days: "14"
startingDay: today
startingDayOffset: 0
hideWeekend: false
noCardBackground: false
compact: false
weather:
showCondition: true
showTemperature: true
showLowTemperature: true
useTwiceDaily: false
entity: weather.pirateweather_home
locale: en
showLocation: false
hidePastEvents: false
hideDaysWithoutEvents: false
hideTodayWithoutEvents: false
combineSimilarEvents: false
showLegend: true
grid_options:
columns: full
rows: 7
timeFormat: t
legendToggle: true
showNavigation: false
replaceTitleText:
"1": Music
"2": Gym
"3": Health & Wellness
"4": Art
"5": Gym
"6": Library
Lunch: ""
showDescription: true
texts:
fullDay: " "
card_mod:
style: |
ha-card {
.event {
color: #333333 !important;
line-height: 16px !important;
background-color: var(--border-color) !important;
border-radius: 10px !important;
max-height: 80px !important;
overflow: hidden !important;
font-size: 1.1em !important;
}
any ideas? Thank you!
Amazing setup, thank you for sharing. thinking of replicating this, would you still recommend the 15-inch HP touchscreen?? Has it served you well or did you have any issues? thanks!
Good question, complicated answer
At the time of my original post this monitor was on sale at woot and was cheaper than any decent tablet or other monitor. And I had some hardware I could use to host just collecting dust.
I still use it as the main solution in my kitchen; however, in hindsight I am not sure if I’d choose it if I were starting from scratch right now.
Also, my decision was influenced a little by some hopes I had to build more stuff around the functionality of the monitor. For example, I was hoping to use the embedded camera to scan barcodes for grocy right there in the kitchen. I was also thinking about using the camera for face recognitions and show a dashboard based on who was looking at the device and a couple other ideas (but i never got time to address any of these either).
If i were to do it again from scratch currently, the only thing outstanding for me would be the size of the display. I think I would default to a cheapish tablet; nevertheless I did find out that this specific screen size worked for us and smaller displays were slightly less visible from a distance which was important for us, but we’d live with it.
Thanks! This really helped me.
Help!!
My lovely wife ask if we should buy a Skylight calendar. I said absolutely not, I’ll try to make it with home assistant.
However, I’m a complete newb and just got the vm up and running with our Google calendars successfully implemented on the calendar tab.
Looking through this documentation I’m having a hard time understanding where I’m editing these script files and regex files. It gives me the coding however I’m lost on where and what to do with it. Can someone point me in the direction of a beginner tutorial for this?
Appreciate any help. Thank you!
Drumsbh
Huge thanks to everyone here! Here is my setup currently. I’ve got several things to tweak but it’s coming along nicely!
2 Likes
Can this be done with a local calendar instead of integrating google calendar?
Can you explain how you get it to show just the entire month? I want it so it looks like a regular calendar, and not have the current day be the always shifted to the first spot. I don’t mind if days from the prior month or the upcoming month are showing, I just don’t want the past days to keep going away. So basically like a traditional paper wall calendar. I think that is what you were saying could be done…
I am not getting the background color on the number for today.
I am using your exact yaml.
card_mod:
style: |
ha-card {
.event.past {
opacity: .2;
background-color: gray !important;
}
.time {
color: #333333 !important;
font-size: 0.8em !important;
}
.event {
color: #333333 !important;
line-height: 16px !important;
background-color: var(--border-color) !important;
border-radius: 10px !important;
max-height: 80px !important;
overflow: hidden !important;
font-size: 1.1em !important;
}
.none {
background-color: transparent !important;
}
.today .number {
border-radius: 5px;
background-color: orange !important;
padding-left: 4px;
padding-right: 4px;
}
.day .date .text {
font-size: 1em !important;
font-weight: bold !important;
}
.day .date .number {
font-weight: bold !important;
font-size: 3em !important;
}
.day {
--background-color: red;
border: solid 1px whitesmoke;
padding: 0.2%;
width: 13% !important;
}
}
Yeah, that is exactly what I am seeing as well.
Removing the custom config part, the card mod works.
Trying to figure out where we have to edit this.
Can you explain how you get it to show just the entire month? I want it so it looks like a regular calendar, and not have the current day be the always shifted to the first spot. I don’t mind if days from the prior month or the upcoming month are showing, I just don’t want the past days to keep going away. So basically like a traditional paper wall calendar. I think that is what you were saying could be done…