Custom Widget: Up Next Calendar

Tutorials & Examples HABPanel Examples
,
1

Heres My Up Next calendar Widget

image

Up Next Calendar.widget.json (2.0 KB)

5 Likes
2

This looks really good. Any writeup notes on how to implement this?

3

or you mean the entire story? (like items, etc)

4

@lysol was that what you were after?

5

I’m not very fluent in various types of code yet. I can work through somethings like changing variables and what not, but when I look at json… it looks like an ancient language. lol.

I took the code and returned after every “\n” to make some more sense of it.

{
"template": "\n
<div class=\"section\">\n
\t\t<div class=\"bigDash\">\n
\t\t\t<div class=\"description\">Up Next</div>\n
\t\t\t<div class=\"top\">\n
\t\t\t\t<div class=\"value\">\n
\t\t\t\t\t<div class=\"nextup\">{{itemValue('CalendarName1')}}</div>\n
\t\t\t\t\t<div class=\"nextupsub\">{{itemValue('CalendarTimeStart1')| date:\"EEEE MMM d\"}}</div>\n
\t\t\t\t\t<div class=\"nextupsub\">{{itemValue('CalendarTimeStart1')| date:\"shortTime\"}} - {{itemValue('CalendarTimeEnd1')| date:\"shortTime\"}}</div>\n
\t\t\t\t</div>\n
\t\t\t</div>\n
\t\t\t<div class=\"bottom\">\n
<p></p>\n\t\t\t</div>\n
<div class=\"bigDash\">\n
\t\t\t<div class=\"description\">Coming Up</div>\n
\t\t\t<div class=\"top\">\n
\t\t\t\t<div class=\"value\">\n
\t\t\t\t\t<div class=\"nextup2\">{{itemValue('CalendarName2')}}</div>\n
\t\t\t\t\t<div class=\"nextupsub\">{{itemValue('CalendarTimeStart2')| date:\"EEEE MMM d\"}}</div>\n
\t\t\t\t\t<div class=\"nextupsub\">{{itemValue('CalendarTimeStart2')| date:\"shortTime\"}} - {{itemValue('CalendarTimeEnd2')| date:\"shortTime\"}}</div>\n
\t\t\t\t</div>\n\t\t\t</div>\n
<div class=\"bigDash\">\n
\t\t\t<div class=\"description\">Later</div>\n
\t\t\t<div class=\"top\">\n
\t\t\t\t<div class=\"value\">\n
\t\t\t\t\t<div class=\"nextup2\">{{itemValue('CalendarName3')}}</div>\n
\t\t\t\t\t<div class=\"nextupsub\">{{itemValue('CalendarTimeStart3')| date:\"EEEE MMM d\"}}</div>\n
\t\t\t\t\t<div class=\"nextupsub\">{{itemValue('CalendarTimeStart3')| date:\"shortTime\"}} - {{itemValue('CalendarTimeEnd3')| date:\"shortTime\"}}</div>\n
<div class=\"nextup2\">{{itemValue('CalendarName4')}}</div>\n
\t\t\t\t\t<div class=\"nextupsub\">{{itemValue('CalendarTimeStart4')| date:\"EEEE MMM d\"}}</div>\n
\t\t\t\t\t<div class=\"nextupsub\">{{itemValue('CalendarTimeStart4')| date:\"shortTime\"}} - {{itemValue('CalendarTimeEnd4')| date:\"shortTime\"}}</div>\n
\t\t\t\t</div>\n
\t\t\t</div>\n
\t\t\t<div class=\"bottom\">\n
\t\t\t</div>  \n
\t\t</div>\n
\t</div>\n",

}
6

I guess to answer your question, yes. If you don’t mind as much of the story you are willing to supply.

7

More than happy to help - I just need to know where you need it. It’s a custom widget so you just need to import it - it’s only a json wrapper to import it once it’s in it is just HTML

8

So is there an implementation guide somewhere? What bindings, items, etc?

Just moving into HabPanel and have been looking for something like this to show heavy trash and other schedules for the fam.

Many thanks, and sorry if I missed the guide posted somewhere else.

Squid

9

hi Its using the items in the json file as well as a working caldav personal binding to populate them - have you found both of those?