Lovelace Google Calendar

Anyway, thanks for a really good looking kalender card!
God job! :grinning:

I am in EST. Also, if there is no event, the date should not appear right?
image

Working fine on my iOS app here. I am guessing it is a cache issue. Are you on the latest beta version of the app (that allows clearing cache)?

Hey arsaboo not sure how i can get the app. I have reinstalled the app but still seeing the code error in red. Might be a ios thing… I´m running version 1.1.1 on IOS

anyway, i stumbled on your github! really nice setup you have

Seems like this is not only related to the Google calender component, i get the same error when adding

This is my config:
resources:


  • type: “custom:weather-card”
    entity_weather: weather.yweather
    entity_sun: sun.sun

Where did you save the google-calendar-card.js file? I suspect the path is incorrect.

Great card! Thank you for sharing, it’s really a great addon!
It’s possibile to change the title from “Calendar” to something else?

Thank you!

Ste

Yep, use name in de config, on the same level as entities.

1 Like

Issue solved :smiley:

I had to add,

frontend:
javascript_version: latest

Nice work! I would love to see this for a caldev calendar.

I’m looking into caldav support but I’m not able to set up caldav support in home-assistant…

What is your configuration like?

I’m using this:

calendar:
  - platform: caldav
    username: username
    password: password
    url: http://192.168.1.250:5000/caldav/admin/home/

The error I have is:
The CalDAV server you are using has a problem with path handling.

I’m trying it with synology however. They have Synology Calendar which supports caldav. I don’t really want to setup another caldav server…

My configuration is almost identical.

calendar:
  - platform: caldav
    username: username
    password: !secret calendar_password
    url: https://example.com/remote.php/dav/

I am using Nextcloud as a NAS solution with a CalDAV server. This worked out of the box and HA automatically discovers all the calendars which belong to the specified user.

Unfortunately, I am not an expert on CalDAV… But have you tried to add your CalDAV calendar to a different client e.g. Thunderbird, Outlook or DAVdroid?

Hi Abeksis,

I don’t know that much of RTL support and I’m developing a new card. I’m open for suggestions on how to implement it and pull requests however. Do you know something about that?

Hi all,

I updated the card and it now:

  • supports also caldav calendars (at least my synology calendar which should be caldav compliant)
  • fixed the icon color
  • I do not add the progressbar anymore when there are no events today
  • less resource hungry, no dependency on font-awesome anymore

Do note that installation instructions are now different!! Please check them on the github, I updated them.

Cheers,
R

1 Like

Hi @jfierb_3420,

caldav support is there!

Hi @arsaboo,

this should be solved with the new version

Wow, thanks! Great work.

Just a brief comment:

I implemented the calendar on the same tab as the Custom animated weather card where @arsaboo contributed to. The apperance of both cards got messed up because they both use the class day. So the CSS of one of the cards was applied to both of them. I fixed it by changing the class name and according CSS entry from day to calendar_day.

I can confirm that it also works with Nextcloud as a CalDAV server!

calendar

Please I need help, I deleted <dist> dir, uploaded calendar-card.js (raw download) to config/www and modified ui.lovelace.yaml like this:

resources:
  - url: https://unpkg.com/[email protected]/moment.js
    type: js
  - url: /local/calendar-card.js
    type: module


  - type: "custom:calendar-card"
    name: ""
    showprogressbar: false
    entities:
      - calendar.personal
      - calendar.contacts

But I get an error saying no such custom card to be shown.

As I was writing this post I rememberedd appending ?v=0.0.3 to the resource call, like this:

  - url: /local/calendar-card.js?v=0.0.3
    type: module

And now it works and quite well, so thank you @rdehuyss for creating it.

How can I change the color of the meeting time?