Lovelace Google Calendar

Share your Projects!
73

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?

74

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?

75

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
76

Hi @jfierb_3420,

caldav support is there!

77

Hi @arsaboo,

this should be solved with the new version

78

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.

79

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

calendar

80

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.

81

How can I change the color of the meeting time?

82

Currently, you can’t :slight_smile: . It follows the color of your theme. But, since it now is not compiled anymore, you can easily change it yourself.

83

I just done all steps same as you (i think), but get same error:3-default

File calendar-card.js raw downloaded to /config/www/ dir with 777 permission…

In fact, i have other custom cards succesfully loaded on ui.lovelace.yaml.

I have tried appending “?v=0.0.3” or changing “type: module” to “type: js”

What am i loosing?

84

Add this under fronted in “configration.yaml” file se below

frontend: javascript_version: latest

08

86

thanks @Supersonical

But i had already added it.

87

Well, besides trying different version suffixes I’m stumped :thinking:

88

Check the developer console, I think you will have a 404 . So, probably, the URL to the calendar card is wrong.

89

That is right @rdehuyss

I got following error message:

Screenshot_1

URL seems OK, but i can’t find syntax error in my code:

  • type: custom:calendar-card
    name: “”
    showprogressbar: false
    entities:
    - calendar.XXXXXXXXXXXXXXX
    - calendar.contacts
90

Your calendar-card.js should be ~9KB in size, is that correct?

91

Im a little confused by this…at first you say I cant, but at the end it sounds like your saying I can.

If so, would you mind sharing how I can adjust that?

Thank you

92

If you know a little about html and css, you can open the contents of the card and change the styling in the style tag

93

Have you tried the simplest install possible?

type: custom:calendar-card
entities:

  • calendar.XXXXXXXXXXXXXXX
  • calendar.contacts

The casing of showProgressBar is wrong and I didn’t try with an empty name. Also, like @vermis said, check in the network tab that your card size is 8.4 KB