[RELEASE] gCalendar Driver - Display working Google Calendars on HE Dashboards

Yep, sure enough.. I removed a few of the path params and once below 255 it worked fine.

side-note -- I don't know if that 255 limitation on the input "gCal", "text", can be removed or not.. But, it'd be really nice if Hubitat could just say "error: field > 255" instead of throwing the 500 error.. just reading all of the above posts mentioning 500 error and that alone could have saved many hours of frustration for some people! I'll mention @mike.maxwell (as he's the only Hubitat dev I can think of)


Yeah, that bit.ly URL shortener also sounds like it could work too..

I can put in a catch for that.

1 Like

New version...

1.0.2 - 09/05/21 - Added urlSize Attribute, added additional language for 255 character limit.

1 Like

Tried to updat the driver with 'Hubitat package Manager' but got this:

Error Occurred During Installation

An error occurred while installing the package: Failed to upgrade driver https://raw.githubusercontent.com/bptworld/Hubitat/master/Drivers/gCalendar/gc-driver.groovy.

I do think it's strange that the link from github ended with a '.'

Since it's the Manager of hubitat... does this make me a "Karen"? :stuck_out_tongue:

Not an issue with my HPM package. I just installed it just fine on one of my hubs. That '.' on the end is just something the error message is putting on, it's not part of the url.

I can't seem to get this working. I installed the driver from HPM, and am not getting any 400 or 500 error responses, but my bpt-gCal driver state is empty.

It seems like google is requiring a sign-in, even for public calendars. I test this by opening an incognito window and pasting the URL I'm using in the driver-- no matter how I change the sharing and customization options, it always prompts me to log in.

Any thoughts?

Setup instructions are in post #1. If the steps are followed in order, it will work. :wink:

If it's still asking for a password, then something it's something within your Google account. :man_shrugging:

Followed your instructions. Still not working. I guess it's my google account.

So you can view your calendar using the embed URL in an incognito window? I guess I need to go hunting around the Google settings.

fixed the limit for multi calendars

    input "gCal2", "text", title: "just extra src"
    input "gCalcol", "text", title: "colours"

theCal = "<div style='height:100%;width:100%'><iframe src='${gCal+gCal2+gCalcol}' style='height:100%;width:100%;border:none'></iframe></div>"

basically your first url is yours
https://calendar.google.com/calendar/embed?height=600&wkst=1&bgcolor=%23ffffff&ctz=Europe%2FLondon&mode=AGENDA&showTitle=0&showNav=0&showDate=0&showPrint=0&showTabs=0&showCalendars=0&showTz=0&src=THISISMAINCAL

then the 1st new field is the extra cal src's (src is the coded calendar link
&src=EXTRA1&src=EXTRA2&src=EXTRA3

then the 2nd new field is for colour coding
&color=%233F51B5&color=%23D50000&color=%23EF6C00&color=%23E67C73&color=%23F6BF26&color=%23D81B60&color=%23616161&color=%23AD1457&color=%23009688

2 Likes

Only problem is it worked fine on laptop. But get an error in fully kiosk browser
net::blocked_by_response

This is a great addition. I have it working on my Win10 desktop but not working within the Hubitat App (on iOS). Any thoughts to check?

Great job to all people involved in this driver!
Question: I am trying to create a task list in a HE dashboard that let's users usually flag when a task is done (start dishwasher, clean windows, etc).

Do you guys think this driver could help? My challenge is that the task (or a virtual switch emulating it) needs to remain in the dashboard until it is done, even if the day passes (imagine I don't water the plants today and tomorrow the task disappears because it is not a usual day for watering the plants...)

Does this driver also brings the Tasks feature of Google Calendar? If so, does the "mark as completed" flag serves anything?

Tks

Nope. There is no interaction between the calendar and HE. It's simply to display on the dashboard.

This is fantastic, thanks !!

What I did to make it working is slightly different with yours.

I used the built in customize feature from Google:

  1. Go to the google calendar setting

  2. Click on Customize
    image

  3. Customize the look and feel as you please, for example:

  4. Copy the iframe code, for example:

<iframe src="https://calendar.google.com/calendar/embed?height=600&wkst=2&bgcolor=%23ffffff&ctz=Australia%2FSydney&showTitle=0&showNav=0&showTz=0&showCalendars=0&mode=MONTH&showPrint=0&showDate=0&showTabs=1&src=xxxx&color=%23A79B8E" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
  1. Grab the ampersand URL / information you want, e.g.
&wkst=2&bgcolor=%23ffffff&ctz=Australia%2FSydney&showTitle=0&showNav=0&showTz=0&showCalendars=0&mode=MONTH&showPrint=0&showDate=0&showTabs=1
  1. Grab the Public URL and embed the above information
    E.g. if public URL is:
https://calendar.google.com/calendar/embed?src=xxxx%40group.calendar.google.com&ctz=Australia%2FSydney

The final URL will be:

https://calendar.google.com/calendar/embed?src=xxxx%40group.calendar.google.com&ctz=Australia%2FSydney**&wkst=2&bgcolor=%23ffffff&ctz=Australia%2FSydney&showTitle=0&showNav=0&showTz=0&showCalendars=0&mode=MONTH&showPrint=0&showDate=0&showTabs=1**
1 Like

While working on this, I realised, if I have an email address that is not a @gmail.com (e.g. @abcdef.com - on which to create the email, I would need to have a G suite / Google Workspace); the public email link is rather too obvious.

let's say the email address is john.doe@abcdef.com ; the public URL will be:
https://calendar.google.com/calendar/embed?src=john.doe%40abcdef.com&ctz=Australia%2FSydney

This rather concerns me as anyone can try to access my public calendar by just typing in those URL.

What do you guys think?

Does anyone know how to remove the Google footer image from the Google Calendar Frame?
Just wanted to save some space to show what's important

The following is the inspected HTML code:

<table id="footer1" class="footer" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td valign="bottom" style="text-align:right;"><div class="subscribe-image" style="display:inline-block;" id="subscribe-id" title="Add to Google Calendar"><div class="logo-plus-button"><div class="logo-plus-button-plus-icon"></div><div class="logo-plus-button-lockup"><span class="logo-plus-button-lockup-text">Calendar</span></div></div></div></td></tr></tbody></table>

When I tried the following CSS, does not seem to work:

.footer {
display: none
}

Did I miss anything? Thanks

Edit: actually the css may not take effect, if you are adding it to the dashboard custom CSS, because I believe the calendar is part of an iframe.

Try adding !important; after the word none, with a space after none.

Thanks, I tried the following; does not seem to work

.footer {
display: none !important;
}

I guess, what you have suspected, as it is an iframe, it just does not take an effect of the dashboard custom CSS

You get some controls on the Google site where you get the embed link, there's some kind of advanced or custom option, where you can change the view, colours, etc. I had issues embedding this and haven't gone back and tried again. Might do it one day soon...