Lovelace Google Calendar

Hi all,

I created a Lovelace Google Calendar component …

More info? See


very nice, can you also add your project here

Hi, any issues on running this on I’m getting the following error from my .js file:

"Uncaught TypeError: Failed to resolve module specifier “moment”. Relative references must start with either “/”, “./”, or “…/”.

I believe it comes from the first line in the .js

import moment from 'moment';

Wich file did you put to your www folder? The one from root of the project or from dist folder?

1 Like

Hello @rdehuyss. I have a number of issues with card.

  1. Card have a hard-coded localhost url. This can be solved by changing it to actual url of my HASS. The problem is that my HASS has different url inside and outside of my network. Is it possible to set some sort of relative path?
  2. You are using REST API to fetch data from calendars. Why do you use it if it’s already available via hass object in card config? And using REST API brings another problem. Card do not support new auth system. We have to accomplish REST API call with bearer token. Without token user will get 403 error and if he has ip_ban set up he will banned.

Could you help with adopting card for new auth system?

I will look into it later this week - reason to use rest api is that it returns 5 calendar events whereas the hass object only returns 1 (as far as I know)


Hi Lapatoc,

Since it was a small change, I changed the url to not being hard-coded anymore, it is now a relative url.

Since it is a relative url, I now hope that it will also work with the new Auth system as it is just a relative url and all existing security cookies/tokens should flow along. Can you test? The new version is available here:

And are you talking about this auth system:

Kind regards,

Yes, the link to new auth system is correct.
Thank you for quick fix. I’ll test new version and report later today.

Well I’ve tested new version of card. Url problem solved but authentication problem still exists. Now I’m getting 401 response. HASS log are full of following entities:

Login attempt or request with invalid authentication from

I’ve located issue with new auth system. The problem is in fetch(url) in getAllUrls function. By default fetch do not send any headers. You have to define them manually. I’ve made ugly fix:

getBearerToken() {
  var userToken = JSON.parse(localStorage.getItem('tokens'));
  return userToken.access_token;

async getAllUrls(urls) {
var btoken = this.getBearerToken();
fetch(url, {headers: {'Authorization':'Bearer '+`${btoken}`}}).than(...

Hi Lapatoc,

the issue should be solved now… I am now using the hass.callApi function which takes care of oAuth integration.

I just pushed it to github again. If you have any issues, do not hesitate to contact me.


1 Like

Thanks. Works great!

BTW. What is the purpose of slider on top of card? I can’t move it.

Ok, hint taken, I’ll make it optional: you are the second person who asks me :slight_smile:

It gives you the progress throughout the day, it is based on the standard google android calendar.

What do you think? Keep it, make it optional, …

Didn’t realized that is day progress bar. Currently I have only all day events in my household calendar. Need to play with other type of events.

How to make that locale would considered? Week days names alway in English.

The progressbar is now optional:

configure it using: showProgressBar: false on the same level as entities.

Also, caching is added for 15 minutes so that we don’t do DDos attack on google for each entity change.


Still need to look into that one. Which locale are you using?

1 Like

Russian. Hass frontend has a token in local storage that identifies which translation to use.

Done! Try with the latest version…

You’re fast! I’m still in the tube))) Will test later.

1 Like