Lovelace Google Calendar

patje125 · November 14, 2018, 3:30pm

This card looks awesome! Unfortunately, I am running into a problem when I try to implement it in my UI. I followed the installation instructions, but I am still getting the “Custom element does not exist” error

I have checked the downloaded file (calendar-card.js) and it is approx 9kB, which seems OK.

I added the following lines to my ui-lovelace.yaml file:

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

And:

views:
  - title: calendar
    icon: mdi:calendar
    cards:
      - type: custom:calendar-card
        name: "xxxxx"
        showProgressBar: false
        numberOfDays: 5
        entities:
          - calendar.xxxxx

The google calendar component is working as I see it in the “states” section.
In the log file I only get the following error:

2018-11-14 16:21:53 ERROR (MainThread) [frontend.js.latest.201808040] http://x.x.x.x:8123/local/custom_ui/calendar-card.js?v=1.01:7:1 Uncaught SyntaxError: Unexpected token <

I am on a windows machine and tried both Chrome and Microsoft Edge.

Can someone help me figure out what the problem is?

Edit: Fixed the problem. Read through some other posts and determined in the Chrome inspector that home assistant still had the ‘non-raw’ .js file

rlongfield · November 15, 2018, 7:52pm

I think that was a mobile screen shot showing the progress bar being a feature of Google Calendar.
Having those images or being able to break out each event into a separate item under the date) would be great.

Corey_Maxim · November 15, 2018, 9:02pm

Yes it would!

apt · November 17, 2018, 11:23am

Did you find a solution to integrate you Synology Calendar? I’m looking to use it for a Waste Collection sensor but I get the same error regarding path handling.

rdehuyss · November 18, 2018, 2:53pm

Yes, it works.

However , I cannot find my configuration anymore of using it with the synology caldav (since I’m not using it myself with Synology caldav). But, I know it worked out in the end… it took me a while though to find the correct synology caldav url.

Corey_Maxim · November 19, 2018, 5:25am

Well, it was working, then converted back ( I assume it was from a update?)

When changing the line to this

  <div class="time">${event.isFullDayEvent ? 'All day' : 
  (moment(event.startDateTime).format('h:mm A') + -+ 
  moment(event.endDateTime).format('h:mm A'))}</div>

Im getting the correct formatted line but with this at the end 1:00pmNaN , did I place something wrong?

Thanks

azzis77 · November 19, 2018, 10:10am

Hi, can i formatting output date in italy?

I have try to modified moment.locale(‘it’) without success.

Thanks

Corey_Maxim · November 19, 2018, 4:59pm

Yes, look at the line in my post above. This is in your local/www / custom / calendar-card / calendar-card.js file. I believe around line 179 you just have to figure out how you want it formatted.

jusdwy · November 28, 2018, 6:03pm

Would be helpful if this card could display the current date and time. I find that often that when I don’t have an event for today and it’s showing the date of the next event I get easily confused.

UPDATE:
made a small edit to switch out the Calendar title for the date.

Here’s what I did in my ui-lovelace.yaml file where I call the calendar card. Note that I added the ‘name’ field and in my case inserted a sensor – based on how I changed the javascript file I think it would break if it wasn’t an HA entity. I’m not even a JS beginner so I don’t know how to do this better at this time.

ui-lovelace.yaml

    - type: custom:calendar-card
      name: sensor.date
      showProgressBar: false
      numberOfDays: 7
      entities:
        - calendar.a

And then in my calendar-card.js file I changed the top code block. Note the card.header line in particular.

calendar-card.js

    class CalendarCard extends HTMLElement {
      set hass(hass) {
        if (!this.content) {
          const card = document.createElement('ha-card');
          card.header = hass.states[this.config.name].state;
          this.content = document.createElement('div');
          this.content.style.padding = '0 16px 16px';
          card.appendChild(this.content);
          this.appendChild(card);
          moment.locale(hass.language);
        }

And of course you need a sensor.date

sensor:
  - platform: time_date
    display_options:
      - 'date'

I tried adding the time too. But I a) didn’t think it looked nice because the JS dropped the whitespace padding in the template sensor I made. And b) it wasn’t updating on the minute so kinda pointless. Going to dive into JS a bit to see if I can make this a bit cleaner, less hacky. But for now, maybe it’ll give another JS newbie the ability to add the date like I did, or how to change the title from Calendar to something else.

ffyter · November 29, 2018, 1:28pm

Everything was working great and now I am getting this error

Error handling message: {‘type’: ‘lovelace/config/card/get’, ‘id’: 32}
7:02 AM components/websocket_api/connection.py (ERROR)

2018-11-28 21:48:27 ERROR (MainThread) [frontend.js.es5.201811033] https://xxx.duckdns.org:8123/static/custom-elements-es5-adapter.js:4:618 Uncaught TypeError: Class constructor CalendarCard cannot be invoked without ‘new’

kslb · December 5, 2018, 9:44am

How to make translation of weekdays and text under the event like “All day” to native language…

HA default choosed language is not English, but in Google Calendar I see all in English…

Thank you for your answer…

Roelofk85 · December 8, 2018, 7:52pm

Hello, how do i fit the code in exactly in my ui-lovelace.yaml?
I get a few bad indentation…

Where i want to fit it in is the code:

views:
  - title: Algemeen
    icon: mdi:home-outline
    cards:
      - type: glance
        title: In & Uitschakelen
        show_state: false
        column_width: calc(100% / 3)
        entities:
          - entity: switch.tv
            name: Tv
            icon: mdi:television-classic
            tap_action: toggle
          - entity: group.sfeerlicht
            name: Sfeerlicht
            icon: mdi:lamp
            tap_action: toggle
          - entity: light.fibaro_system_fgd212_dimmer_2_level_4
            name: Keuken
            icon: mdi:track-light
            tap_action: toggle
          - entity: light.fibaro_system_fgd212_dimmer_2_level_2
            name: Washok
            icon: mdi:lightbulb
            tap_action: toggle
          - entity: script.hombot_aan
            name: Stofzuiger
            icon: mdi:robot-vacuum
            tap_action: toggle
      - type: entities
        title: Radio
        show_header_toggle: true
        entities:
          - input_select.chromecast_radio_station
          - input_select.chromecast_radio_speakers
          - input_number.volume_radio
          - script.play_chromecast_radio
          - script.stop_chromecast_radio
      - type: media-control
        entity: media_player.android_tv
      - type: weather-forecast
        entity: weather.smhi_terschelling
      - type: entities
        title: Lokatie
        show_header_toggle: true
        entities:
          - group.tracker_combi_roelof
          - group.tracker_combi_inger

This code i want to fit in:

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

- type: "custom:calendar-card"
      entities:
        - calendar.namegmailcom
        - calendar.feestdagen_in_nederland
        - calendar.name2gmailcom

- type: "custom:calendar-card"
      name: "Birthdays"
      showProgressBar: false
      numberOfDays: 14
      entities:
        - calendar.contacts

Thanks!

Roelofk85 · December 9, 2018, 6:00pm

If someone wants tot share their ui-lovelace.yaml would be great.
Everything else is set up oke accept this

Roelofk85 · December 9, 2018, 6:57pm

I think i’ve got it allright in the ui-lovelace.yaml now, but there is an error on my lovelace screen:
lovelace%20error

I’ve added the calendar-card.js to several folders to test such as:

www
www / custom / calendar-card
www / dist

The size of my calender card is 8,7kb

Already added the following to my config:
frontend:
javascript_version: latest

Sorry for all the reply’s !!!

JTPublic · December 14, 2018, 4:31pm

Hi rdehuyss,

I have implemented the Lovelace Google Calendar, works great, excellent!!

Just one question, I have imported Outlook in Google Calendar which only show Busy/Tenative/etc., would it be possible to show these events with entity_id in front so I can tell it’s source? Maybe a simple abbreviation of the entity_id/name? i.e.

JT: Busy
11:30-12:30

I feel it may also be helpful to tell similar events from different calendar entity_id’s.

TIA

Roelofk85 · December 21, 2018, 12:29pm

He is working, the calendar-card.js was in the wrong folder!
Great project!

Thanks for making rdehuyss

Roelofk85 · December 21, 2018, 8:56pm

How do i get the “send congrats” behind the birthday’s?
And what happens when you click on it?
Opens it the greetz website to send a postcard or something?

Thanks

jusdwy · January 16, 2019, 3:29pm

My calendar is displaying yesterday’s events. How do I force the card into my correct time?

Untitled

I added the date as a title. But as you can see the first event displayed has already passed.

Frazzyfin · January 18, 2019, 2:13pm

How can I change the event location text colour? It doesn’t look good with my theme.

[Album] Imgur

Jokerigno · January 22, 2019, 10:48am

Hi,

first of all thank you for the amazing works. I’ve just set it up on my living room tablet and it is great!

I just have one question: it is possible to localize it?

Thank you in advance