Thanks kdw2060
Now I get this error message
There was an error loading the gcal data: Error: Not Found
Calendar(s) queried at: Tue Feb 20 2024 22:00:00 GMT+0100 (Central European Standard Time)
Events written to file: true. At: Tue Feb 20 2024 22:00:00 GMT+0100 (Central European Standard Time)
postEventsAllCalendars error: TypeError: Cannot read properties of undefined (reading 'length')
Like I said in my earlier reaction, there probably is an error in your config. Common mistakes people make:
I checked and I think now everything is good for the 3 above points
I missed the share between google calendar and the keyfile
New error message
Calendar(s) queried at: Thu Feb 22 2024 10:15:02 GMT+0100 (Central European Standard Time)
Events written to file: true. At: Thu Feb 22 2024 10:15:02 GMT+0100 (Central European Standard Time)
postEvents error with: AxiosError: Request failed with status code 400
Please post your addon config. Probably still some error in there.
locale: fr
timeZone: Europe/Paris
fetchDays: 365
fetchDaysPast: -7
fetchCRON: "*/30 * * * *"
calendarList:
- calName: GMail Famille
calType: google
username: username
password: password
caldavUrl: http://something (only for caldav)
calId: [email protected]
googleServiceAccountKeyfile: calendar-ha-414913-1635b1edccdf.json
you need to remove the space from the calName. Iâll update the docs to mention this.
It works !!!
Thank you so much for this addon and your support
Hi!
I have a question and a request if someone can help me!
Let me first clarify that I have no programming knowledge and I understand yaml somewhat! I would like the data from the google calendar add-on as shown in the image:
Inserted into the SVG text field, which is made on the floor plan:
Previously, I had done it with the help of add-on cards, but the display on all devices (PC, tablet, phone) gave me problems.
Now the view works satisfactorily for me on all devices, after I changed the display to just the SVG file (I donât use any other cards except the floor plan card)!
Since I donât have programming skills, I donât know how to solve the issue of giving me selected (not only my events! Also data such as the next F1 race, Moto GP, waste collection, national holidays, etc.) data from the google calendar add-on!
Can I help myself with this add-on?
Link to my floor plan view and zip of both card views : My floor plan example: ¡ ExperienceLovelace/ha-floorplan ¡ Discussion #411 ¡ GitHub
I donât think youâre in the right thread, as your question is more about how to set up lovelace cards than using my calendar add-on. It also looks like youâre not using the add-on right now but the standard calendar integration. Regardless of what calendar integration method you use your issue is about how to get the data displayed in a certain card.
I suggest you ask around in threads about the floorplan card. One tip I can give is to look at custom button card too, you could create different zones/templates inside a custom button card, one of which could be the svg floorplan. Thereâs an extensive thread about custom button card and it has rich documentation.
Hi.
Thanks for the reply.
I use the google calendar add-on, which works with any calendar card without a problem and in the settings (day, week, month) and just the way I want it.
As I have already written, it presents a problem (for me, because I somehow solved it with a grid card) of the display on the mobile phone, because it did not want to display nicely on the screen.
When I tried to use only the SVG file, everything was displayed nicely even on a mobile phone. Otherwise, I struggled at first with the placement of the weather card in the SVG file, but somehow I succeeded. The display of persons or data was also not a problem.
The only thing I donât know is to use javascript code. Unless I find an example and then start trying/fixing it, as I did in the case of the code below, which I can use for several calendars but only to display the first event.
{{as_timestamp(strptime(state_attr("calendar.f1","start_time"),"%Y-%m-%d %H:%M:%S")) | timestamp_custom("%d %B %Y %H:%M")}}-{{as_timestamp(strptime(state_attr("calendar.f1","end_time"),"%Y-%m-%d %H: %M:%S")) | timestamp_custom("%H:%M")}} {{state_attr("calendar.f1","message")}}, {{state_attr("calendar.f1","location")}} {{state_attr(" calendar.f1","description")}} {{state_attr("calendar.f1","summary")}}
Which shows me only the first event in the calendar/calendars, which can be several months apart in time, but in the same calendar there can be several events on the same day, and until the first one passes, it doesnât show me the second one.
An example is this weekend when there are several events in Formula1 and Moto GP in one day and it shows me only the first one that will be on the line and not all of them for this weekend or say within 7 days as you can specify in the add-on card.
I couldnât find anywhere that next.state_attr or something like that could be used to get more events.
I have the following configuration:
locale: it-IT
timeZone: ââ
fetchDays: 365
fetchDaysPast: 7
fetchCRON: â30â
calendarList:
Anyway with button-card copied from yours, I have the following in dashboard:
Reading the log I get the following:
s6-rc: info: service base-addon-banner successfully started
s6-rc: info: service fix-attrs: starting
s6-rc: info: service base-addon-log-level: starting
s6-rc: info: service fix-attrs successfully started
s6-rc: info: service base-addon-log-level successfully started
s6-rc: info: service legacy-cont-init: starting
s6-rc: info: service legacy-cont-init successfully started
s6-rc: info: service legacy-services: starting
s6-rc: info: service legacy-services successfully started
System locale: en-US
Luxon locale set to: it-IT
System timeZone: Europe/Rome
Number of calendars: 1
/app/node_modules/node-cron/src/convert-expression/month-names-conversion.js:10
expression = expression.replace(new RegExp(items[i], 'gi'), parseInt(i, 10) + 1);
^
TypeError: Cannot read properties of undefined (reading 'replace')
at convertMonthName (/app/node_modules/node-cron/src/convert-expression/month-names-conversion.js:10:37)
at interprete (/app/node_modules/node-cron/src/convert-expression/month-names-conversion.js:16:27)
at interprete (/app/node_modules/node-cron/src/convert-expression/index.js:54:26)
at validate (/app/node_modules/node-cron/src/pattern-validation.js:117:32)
at new TimeMatcher (/app/node_modules/node-cron/src/time-matcher.js:14:9)
at new Scheduler (/app/node_modules/node-cron/src/scheduler.js:9:28)
at new ScheduledTask (/app/node_modules/node-cron/src/scheduled-task.js:22:27)
at createTask (/app/node_modules/node-cron/src/node-cron.js:36:12)
at Object.schedule (/app/node_modules/node-cron/src/node-cron.js:25:18)
at Object.<anonymous> (/app/index.js:493:6)
Node.js v18.19.1
s6-rc: info: service legacy-services: stopping
s6-rc: info: service legacy-services successfully stopped
s6-rc: info: service legacy-cont-init: stopping
s6-rc: info: service legacy-cont-init successfully stopped
s6-rc: info: service fix-attrs: stopping
s6-rc: info: service base-addon-log-level: stopping
s6-rc: info: service fix-attrs successfully stopped
s6-rc: info: service base-addon-log-level successfully stopped
s6-rc: info: service base-addon-banner: stopping
s6-rc: info: service base-addon-banner successfully stopped
s6-rc: info: service s6rc-oneshot-runner: stopping
s6-rc: info: service s6rc-oneshot-runner successfully stopped
Your value in fetchCRON is not a valid cron pattern. The error message is one from node-cron as you can see, which could have given you a clue. I have linked to a cron pattern generator in the docs, just use that tool to get a valid pattern (also have a look at the examples via the examples-link on that website).
thanks you for your support, I fixed all the errors coming from the addon and now it works very well.
Now I think I have some issue from the button-card code in the dashboard.
I used the hass-addon-calendar/card-examples/onePersonNext4.yaml example but I get this card:
Which is the issue now?
I read previous posts and in the solution you suggested I have both fixed, that is card-mod (that I installed) and the link to the image (that I put into /config/www)
config\www is the right folder for the image. I guess thereâs a mistake in the img path in your card code still. It should be somehting like <img src="/local/filename.png"/>
And the blown up icons suggest that you donât have card-mod installed which is used for the styling. If you have never used card-mod, take some time to read its documentation: GitHub - thomasloven/lovelace-card-mod: đš Add CSS styles to (almost) any lovelace card
Well, I solved about image, now I can see it in the card.
But card-mod seems to be installed:
But it doesnât work, even if I followed the configuration steps.
this is my button card code. does this work.
type: custom:button-card
name: Simon
show_icon: false
show_name: false
entity: sensor.simoncal
custom_fields:
person: '[[[ return `` ]]]'
calendar: |
[[[ let calSnippet = '';
for (let i = 0; i < entity.state; i++) {
if (i > 3) {};
if (i <= 3 ) {
let start_month = entity.attributes.data[i].startMonth;
let start_day = entity.attributes.data[i].startDay;
let start_time = entity.attributes.data[i].startTime;
let end_month = entity.attributes.data[i].endMonth;
let end_day = entity.attributes.data[i].endDay;
let end_time = entity.attributes.data[i].endTime;
let time = start_time;
let wholeDay = entity.attributes.data[i].wholeDay;
if (end_day != null && start_day !== end_day) {time = "meerdaags, tot " + end_day + " " + end_month};
if (wholeDay === true) {time = "all day"};
let event = entity.attributes.data[i].summary;
let location = entity.attributes.data[i].location;
if (location === "" || location === undefined) {location = "-"}
calSnippet +=
`<table><tr>
<td class="date month">${start_month}</td><td class="event"><div class="event-title">${event}</div></td>
</tr>
<tr>
<td class="date day">${start_day}</td><td class="event"><span class="location"><ha-icon class="icon" icon="mdi:map-marker"></ha-icon>${location}</span><span class="time"><ha-icon class="icon" icon="mdi:clock-outline"></ha-icon>${time}</span></td>
</tr></table>`
}
}
return calSnippet; ]]]
styles:
card:
- color: null
- margin-top: 1em
- box-shadow: none
grid:
- grid-template-areas: '"person" "calendar"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content
person:
- align-self: middle
card_mod:
style: |
img {
border-radius: 50%;
width: 120px;
margin-bottom: 1em;
}
.icon {
margin-right: 5%;
text-align: center;
float: left;
width: 16px;
}
table {
margin-left: 10px;
box-sizing: border-box;
border-spacing: 0;
margin-bottom: 1.25em;
width: 100%;
}
td {
white-space: -o-pre-wrap;
word-wrap: break-word;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
}
.date {
border-right: 2px solid #008000;
width: 20%;
text-align: center;
}
.event, .task {
padding-left: 10px;
width: 80%;
}
.month {
text-transform: uppercase;
vertical-align: bottom;
}
.day {
font-size: 1.8em;
vertical-align: top;
}
.event-title {
margin-top: 0;
font-size: 1.1em;
font-weight: 400;
text-align: left;
vertical-align: top;
word-wrap: break-word;
overflow-wrap: break-word;
}
.time, .location {
display: block;
text-align: left;
font-size: 0.9em;
padding-top: 5px;
}
.time {
padding-bottom: 1em;
}
Ok, thank you Frosty.
I compared your code with developer one and I missed âcard_mod:â at row 51.
The example onePersonNext4.yaml lacks this reference. If you add âcard_mod:â between âperson:â entry and âstyle:â entry at that row, it works.
Now I can enjoy with characters dimensions and colors etc. etc.
Thank you again!!
Thatâs due to my example code being old and card-mod having changed its syntax since a recent release.
Iâm trying to use in a button-card the other script also, the family planner, I guess if thereâs something to change due to card-mod new version.
For example, using this part of the code:
let calFabioState = states['sensor.fabio'].state;
let calFabioData = states['sensor.fabio'].attributes.data;
for (let i = 0; i < calFabioState; i++) {
if (calFabioData[i].start_month == currentMonth) {
let day = calFabioData[i].start_day;
let summary = calFabioData[i].summary.replace(/'/g,''');
let label = '';
let startTime = calFabioData[i].start_time;
if (calFabioData[i].whole_day) {startTime = 'Tutto il giorno';}
if (calFabioData[i].label !== undefined) {label = '<span class="label">'+calFabioData[i].label+'</span>';}
calendar = calendar.replace(`<div style="grid-area: c1_${day}" id="c1_${day}" class="event"></div>`, `<div style="grid-area: c1_${day}" id="c1_${day}" class="event"><span>${startTime} - ${summary}</span>${label}</div>`);
}
}
I canât see the calendar events in the grid, i.e.:
PS: please note that Iâm changing the calendar grid as I like 
I really havenât put any effort into that family planner design since my original post in this thread. Probably the entity atributes donât match any more.
Iâd advise you to look at this thread instead, that user has made a really beautiful family calendar solution.
