Lovelace Google Calendar

Share your Projects!
245

It might also be a bug from the previous code that got carried over into your code. Right now the first multi-day event is gone but the second one which ended yesterday is still there. So I think it’s the same problem that was there before in which events from the previous day were still showing.

The issue was first reported by arsaboo somewhere around post #55. and rdehyuss said it was fixed in the “new version” somewhere around post #76. And I can confirm that the latest version of his code that I was using right before switching to yours was working correctly. But it doesn’t say what was changed to fix it.

246

I cannot seem to change the color of the Time of each event. Its currently in black which is extremely hard to see using the Midnight theme that I use.

My HA header is currently black. This is accomplished within themes.yaml using primary-color: ‘#000000’. I have confirmed that the color of the Time of each event on this Lovelace Google Calendar card changes to whatever color I change the theme’s primary-color to. I want my header to remain black but I want the time on each event of the calendar to show in a different color.

Any ideas on how to accomplish this? I have tried using card-modder on the calendar card by setting primary-color: ‘#5294E2’; however that and nothing else I try seems to alter that black text. Any ideas from the experts?

247

I like also the images in the calendar. Can you explain how you did that ?

248

You can do it with card-modder. For example:

  - type: custom:card-modder
    style:
      background-image: url("/local/blackgradient.jpg")
      background-size: 400%, 400%
      background-repeat: no-repeat
    card:            
      type: custom:calendar-card
      title: "Upcoming "
      numberOfDays: 21
      showDot: True
      entities:
        - calendar.hassio
        - calendar.holidays_in_united_states
249

Just to answer my own question, line 104 of calendar-card.js sets the color of the time to primary-color. I manually edited it for the color I wanted. I don’t see a way to make a feature request on @atomic77 's github page so I’ll request an option to modify the time color here.

250

Hi all, it’s a long time I was here as the author of this Lovelace card. Personally, I don’t have any use anymore for the card - I developed it to learn some stuff about frontend programming in HASS but don’t use it myself actually.

I see that there is a need to develop this card further but I don’t have the time to do so myself. If anybody wants to become a maintainer of this card, by all means. I’ll give you write access to the repository. If somebody wants to do so, do not hesitate to pm me.

Kind regards,
R

251

@atomic77 Can you or anyone tell me how to get rid of that one big white dot. Its only showing on my deliveries calendar. I added showDot: false but that doesn’t help.

      - type: custom:calendar-card
        title: "Deliveries"
        numberOfDays: 14
        timeFormat: hh:mm
        showDot: false
        entities:
          - calendar.deliveries

image

Edit: Nevermind. I didn’t realize that was a progress bar that is enabled by default. showProgressBar: false removed it.

252

Does anyone know how to change the number of days that get pulled in? I tried pulling down wget https://raw.githubusercontent.com/home-assistant/home-assistant/dev/homeassistant/components/calendar/google.py but it comes back with a 404 error so I can’t edit ‘maxResults’: 5

Thanks for your help.

253

The reason the link is no longer valid as they are pushing the new naming structure for custom components starting with HA 0.88. Instead of google.py in the calendar folder, it is calendar.py in the google folder. Here is a link to calendar.py in which you’ll need to modify the maxResults:

https://raw.githubusercontent.com/home-assistant/home-assistant/dev/homeassistant/components/google/calendar.py

254

Does anyone of you know whether there is a card for iCloud CalDav calendars as well? I can’t seem to get this working for iCloud.

255

Hi,

I don’t know what happened but since few days calendar is gone.

Did anyone had the same strange issue?

256

Hi, I’ve added my Google Calendar to hass but I cannot get the card to display at all. I created a www folder inside the config folder and posted the calendar-card file there.

This is the lovelace entry:

resources:
  - url: 'https://unpkg.com/[email protected]/moment.js'
    type: js
  - url: '/<my_hassio_ip>/config/www/calendar-card.js'
    type: module
  - type: 'custom:calendar-card'
    name: ''
    showprogressbar: true
    entities:
      - calendar.<calendar_name>
257

you need to move the card portion of the configuration that you have above (starting with “- type:…”) and relocate that to a view in the main portion of your lovelace config.

resources:
  - url: 'https://unpkg.com/[email protected]/moment.js'
    type: js
  - url: '/<my_hassio_ip>/config/www/calendar-card.js'
    type: module

title: Lovelace
views:
  - title: Main
    cards:
      - type: 'custom:calendar-card'
        name: ''
        showprogressbar: true
        entities:
          - calendar.<calendar_name>
258

And to add to this, if this is your first lovelace custom component you will need to restart to get them to start working.

1 Like
259

Sorry for the late reply on this… I tried that too but the calendar card still is not found. I do have a custom weather card working (only on Chrome though) so it’s not a problem with the custom component.

260

You said you created a new folder but your lovelace link isnt pointing to that place.

I placed it also in another folder (custom_ui)
And have the following link:
/local/custom_ui/calendar-card.js?v=1.0.1

261

Looking for a little assistance. I’m using the fork from here. It’s working fine on my Window PC browser, however on my iPad the calendar is only taking up half the card.

Any idea’s?

card

1 Like
262

Today i installed this fork by @atomic77, and i really love it :slight_smile:

I wish this would be officially implemented into HA since it is extremely useful, and i had some “issues” with the installation to begin with, fully my fault since i am a beginner :wink: But having it baked into HA i magine that using this lovely Loelace card would sure be easier?!

263

Hey what theme are you using? the time utilizes --primary-color so no dark theme with dark header works that well it seems

264

Hey conedmiro,

I’m using mxMononight. I managed to fix it but now I can’t remember what I did, haha. Sorry, wish I could be of more assistance. My time text is now white so it shows up without issue with my dark theme.

1 Like