Have u done a full restart ? And a shift-reload in the browser? Can I also post me the initialisation logs …the error means basically that calendar is trying to use the moment resource before it’s initialised ., Which is strange…
Have done a full restart, but forgot about the refresh. I got it running now.
Thnx for the advice and help.
But does anyone knows if the development of this card is still active?
After the latest update my calendar was gone to. Came back a few days later. Did not change a thing…
Do you have a modified version of this card?
The lines you show to change are slightly different than the ones I have in my code. I just installed this card a few days ago so I’m pretty sure mine is using the latest code from the github.
And your changes as recommended don’t have any effect on the date display.
Hello finity, the original lines should look like below …
<div>${momentDay.format('DD')}</div>
<div>${momentDay.format('ddd')}</div>
after you change things in calendar-card.js , you must shift the version number of the resource entry of
calendar-card.js in ui-lovelace.yaml. This causes HA to update.
per example :
- url: /local/calendar-card.js?v=1.3.197
type: module
this surly look different in your ui-lovelace,yaml - but shift your number behind v= up.
Then refresh the lovelace interface, update the browser window , and if necessary clean up the browser history - at least it should work …
I am finding my card doesn’t load on first view of lovelace when I open my browser, but if you hit the three dots … to the top right of the page, hit refresh, then it always appears the second time. As I guess then it has already loaded the moment.js file.
I got it working now. I had to update the version AND restart HA AND clear the browser cache. Thanks for the help.
Now I just need to figure out how to change the location link colors. They look horrendous and are unreadable on a dark theme. I’ll dig in and see what else I need to change.
And I may likely remove this card from the update tracker since it doesn’t really look like there has been any active “official” development in a long while.
look for the line,
getEventHtml(event)
I’ve modified my version of the card, but it’ll be near line 181.
Under that you’ll notice that the location link is set to a div style that doesn’t exist. Line 191 for me.
${event.location ? `<div class="location">
You can define a new style above that uses a text colour more pleasing to your theme. Notice how under the style declarations it’s using
color: var(--primary-text-color);
that’ll pull the colour set by your theme yaml. So open up your theme yaml file and check out what kinda colours are set. Here’s the midnight-remake.yaml for instance,
# Text colors
primary-text-color: '#ffffff'
text-primary-color: 'var(--primary-text-color)'
secondary-text-color: 'var(--accent-color)'
disabled-text-color: 'rgba(150,150,150,.5)'
label-badge-border-color: 'green'
Hope that helps.
I tried it:
- type: js
url: '/local/moment.js'
Rebooted the host and started an a browser did a full refresh, but still the same.
Same error log appears 
/local/custom_ui/calendar-card/calendar-card.js?v=1.0.1:10:7
I can see other people have other versions, but I’ve never seen any updates for the card in my custom updater. What version do you run with?
I eventually figured out how to just remove the hyperlink portion and set the location to a normal font color that way.
But since you and @zte seem to have modified your cards from the original would you both mind posting up the code for your cards as they are now and a resulting screen shot? The layout of mine is a little wonky (alignment and rows/columns are a little off) and I’d like to see if either of you managed to clean it up any from the original.
here’s the way mine looks now:
Thanks to both of you for the help.
1 Like
I’ll post mine when I’m next at the computer.
I’ve noticed that events with multi line locations screw up the formatting. I haven’t figured that out, it’s all ‘flex’ reactive style positioning and sizing, which I’m not too familiar with.
1 Like
After playing around some more I figured out how to change the hyper-link color to be more theme friendly.
modify this section and add the “style=color:…” to the “a href…” portion as below:
getEventHtml(event) {
if(event.type) {
return `<ha-icon icon="mdi:circle" class="now"></ha-icon><hr class="now" />`;
}
//${event.summary.indexOf('birthday') > 0 ? `<div class="congrats"><i class="fas fa-gift"></i> Send congrats</div>` : ''}
return `
<div class="event-wrapper">
<div class="event">
<div class="info">
<div class="summary">${event.title}</div>
${event.location ? `<div class="location"><ha-icon icon="mdi:map-marker"></ha-icon>
${event.locationAddress ? `<a href="https://www.google.com/maps/place/${event.locationAddress}" target="_blank" style="color:#B58E31;">${event.location}</a></div>` : `${event.location}</div>`}` : ''}
</div>
<div class="time">${event.isFullDayEvent ? 'All day' : (moment(event.startDateTime).format('HH:mm') + `-` + moment(event.endDateTime).format('HH:mm'))}</div>
</div>
</div>`;
}
I also changed the date format per @zte’s post above and I changed the color of the map marker icon:
ha-icon {
color: #f44242;
}
the default code with those changes looks like this:
Still hoping to get the horrendous alignment worked out.
If you have “moment undefined” error that means moment.js is loaded before calendar (I think asynchronously?). I just created a fork with a simple fix (I found the way in some other component repository)
https://github.com/atomic7777/calendar-card
Try it, reload your browser (reload cache with ctrl-shift-r).
The second thing is translations. There is something broken with moment.js translations loaded from /locale, the simple fix is to change in ui-lovelace.yaml:
- url: https://unpkg.com/[email protected]/moment.js?v=0.2.1
to:
- url: https://unpkg.com/[email protected]/min/moment-with-locales.js
The file is much bigger (over 500KB) but should work with all languages.
EDIT: Added some other optional settings to make events more visible.
- custom “All day” text (for translation)
- custom color of today and tomorrow events
- custom text in bottom line for today and tomorrow events
- visibility of dot in event topic
example:
textAllDay: “Cały dzień”
textToday: “Dzisiaj:”
textTomorrow: “Jutro:”
todayColor: red
tomorrowColor: orange
showDot: true
wow this looks good. i’ll probably be switching.
Nice feature and thanks. It seems to work by following your guide on github - no errors.
Was hasving issues with another Google Calendar Card, which I no longer think is being updated - so thank you.
Is it possible to change the language, so it doesn’t show mon, tue, wed and so on to a desired language?
For week days translation go to ui-lovelace.yaml and change:
- url: https://unpkg.com/[email protected]/moment.js?v=0.2.1
to
- url: https://unpkg.com/[email protected]/min/moment-with-locales.js
It will load the library with all languages included, and it will choose the correct language based on what you have chosen in Home Assistant. It works here in my HA correctly.
I’m trying to find a simple way to make it faster to load (only desired language) because it’s not working as it should (local language file not being loaded from /locale folder on server)
I can’t seem to get it working on my phone. I have a shorcut to my Home Assistant on my phone (Android) but it just doesn’t show the calendar. Is this with everyone?
I had problems on my phone too. I think it was browser’s cache. Yesterday it was not working on Opera Mobile, but working on Chrome, after cache clean (in privacy settings) it’s working everywhere. As far as I know it’s not the script’s fault, it’s the way how browser and HA load js files and keep them to use even without Internet connection.
1 Like
Thanks, will give it a shot in a few minutes.
I have a few questions you might be able to answer:
- Is it possible to hide the events already occurred?
- Is it possible to color the appointments depending on which calendar the event is stored under?
- I don’t seem to get the progress bar when an event occurs, any ideas?