[SOLVED] Embed Google Calendar into Hab Dashboard

Apps & Services HABPanel
1

Hey Everyone,

Really enjoying the habpanel after a few weeks of tinkering!

I really want to have my google calendar events (agenda view) embedded into my habpanel.

I have managed to get it working but its gross looking, and I have to be signed into my account to in the Fully Kiosk Browser to make it work.

I found a way to have it styled and fitting in nicer with the theme but it requires making the cal public, which obviously I don’t want to do!

Any tips/hacks to embed your calendar into the hab dashboard?

I am using mostly paper UI but i have written a few rules files so I get the markup if I need to code something.

Thanks

habpanel
habpanel.jpeg1310×768 650 KB

2

Why do you have to make the calendar public for that? Can’t you just use Fully to log in to the calendar (by going to https://www.google.com/calendar and entering your credentials) and open HABPanel afterwards?

3

Yes what you are suggesting works, but in order to style the calendar to make it fit with the theme I have to run it through seperate software or service which requires it to be public as you can’t style an iframe with CSS. The other option is to copy the source files for the calendar and save locally to the /static/ folder and modify the stylesheet link, but again that requires the calendar to be public.

Kinda hoping for a way to access via API or something.

4

To embedd our Google Calendar i costumized it like shown in this Video:

And afterwards I put the generated iframe code into a default widget.
This worked well for me.

grafik
grafik.png1453×897 44.2 KB

1 Like
5

Yeh, thanks for the reply, like I said though I know how to do that, but the default Google calendar is just so 90’s looking. My habpanel looks so nice and then the calendar looks so crappy.

I have seen a few people who have integrated the calendar entries directly into openhab so they can pull them in as strings. That’s what I am looking for.

6

For anyone who is interested in a hacky fix for this, you can embed some filters to the style as below to modify to color to fit your theme as best you can:

<iframe src="YOUR AGENDA GOOGLE CALENDAR EMBED CODE"
    frameborder="0"
    scrolling="no"
    width="100%"
    height="400"
    class="gcal"
    style="-webkit-filter: hue-rotate(535deg) brightness(73%) saturate(232%) invert(100%) contrast(142%);
filter: hue-rotate(535deg) brightness(73%) saturate(232%) invert(100%) contrast(142%); margin-top: 7px;
transform: scale(1.4); transform-origin: 80px; padding-left: 15px; padding-right: 34px; margin-left:-2px;">

You just need to modify the hue-rotate, brightness, saturate, invert and contrast elements till you get a match.

You can also change the transform scale to fit your needs.

See mine here with some added div boxes to hide the clutter:

habpanel
habpanel.jpg1784×1049 867 KB

2 Likes
7

Nice how you got it mine does not work! it shows google logo on the top and much clutter from google
no idea if you still use this setup and how you have configured it now?

8

Yeah I hid all the clutter by offsetting the frame box inside another div. I can send the full widget code here later tonight

1 Like
9

Thanks, please do share your setup so I can take a look and implement it myself

10

You might need to play with the numbers in the style attribut to get the perfect fit for your hab panel…

<div class="gcaloverlay" 
style="
width: 100%;
height: 100%;
background-color: #232323; /* change this colour to match you panel background color */
z-index: 1000;
position: absolute;
overflow: hidden;">

<div class="title" style="
background-color: #222; /* change this colour to match you panel background color */
width: 106%;
margin-bottom: -43px;
font-size: 18px;
padding-top: 23px;
text-align: center;
text-transform: capitalize;
font-weight: 300;
transform: rotate(0deg);
margin-top: 0px;
position: relative;
top: -12px;
padding-bottom: 9px;
margin-left: -17px;
z-index: 99999;">Events</div>

<iframe src="YOUR AGENDA GOOGLE CALENDAR EMBED CODE"
frameborder="0"
scrolling="no"
width="100%"
height="670"
class="gcal"
style="-webkit-filter: hue-rotate(450deg) brightness(77%) saturate(0%) invert(100%) contrast(142%);
filter: hue-rotate(450deg) brightness(77%) saturate(0%) invert(100%) contrast(142%);
margin-top: 47px;
transform: scale(1.2);
transform-origin: 80px;
padding-left: 5px;
padding-right: 26px;
margin-left: -2px;" ></iframe>
</div>
</div>
1 Like
12

Much better solution I found here: [Solved] Show Google Calendar Events in HabPanel/Sitemap - CalDav Personal - Openhab 2.4