VertiCal Family Calendar

Dear all,
after trying and not finding what I needed for my purpose I decided to create my own family calendar. As a normal family calendar with vertical design would do, it summarizes four people and a family group (in my case, but the code is obviously editable) and it displays the next 3 days.
It uses the iCalendar Binding and is meant for a wall-mounted tablet to show always the next events of the family.
At the moment, there are some minor fixes needed, therefore it is still beta. But it is already useable and should be ok for now.

At the moment, 4 people + a family calendar are used. In the props, they can all be defined.
The calendar items have to be created using the iCalendar binding and setting up the eventfilter things for the next days.

How to create the appropriate items:
It is important to maintain the nomenclature in order to make it working and it is useful to create the thing as eventfilter for every day (10 events max for every day).

  • Create your iCalendar thing subscribing to your calendar (e.g.; “Matthias”)
  • Create a thing “eventfilter” with maximum 10 matches for every single day
  • The item nomenclature for Calendar “Matthias” should be :(Title of the appointment of result 0 of today is
    “Calendar_Matthias_Events_Today_Result_0_Title”,
    “Calendar_Matthias_Events_Today_Result_0_Begin”,
    “Calendar_Matthias_Events_Today_Result_0_End”.
    for tomorrow, the things are called
    “Calendar_Matthias_Events_Tomorrow_Result_0_Title”… and so on
    The day after they are called
    “Calendar_Matthias_Events_Plus2_Result_0_Title”, and so on.

There are some things and to do’s, and surely it is very demanding since there are many items needed. It does sometimes slow down some browser, but it works for me.

To do’s:

  • I would like to add weather info under the Dates in the left column
  • The first column, first row has not the same height as the other ones and I still can’t figure out why (i.e, in the screenshot, the “Matthias” box in the left upper corner should be high as “Gabriel”, “Familie” and the others

I hope you can use the widget and enjoy it.

image

Changelog

Version 0.1

  • initial release

Version 0.2

  • changed github link and filemame to .yml

Resources

The code is too long to post in this topic, therefore I included the github repository link.
Feel free to help improving, I would appreciate any help!

Github repository

6 Likes

Hello,
thank you for that widget. Possible to share a snippet of your .items and .things?
I would like to understand the naming convention. I dont get it running.

Regards,
Dee Zett.

EDIT: I made out. Great widget!

2 Likes

Hello,

the link should also be changed :slight_smile:

Best regards

Thanks for the hint!
I edited the filename but did not update the link. Now it’s working again :grinning:

Hello i’m totally noob with calendars.

Could someone give more explanation about these two steps please?

  • Create your iCalendar thing subscribing to your calendar (e.g.; “Matthias”)
  • Create a thing “eventfilter” with maximum 10 matches for every single day

Hi @Pastroboy ,
first of all you need the iCalendar binding . Install it and create a Thing where you subscribe to your icalendar. Then you can create the eventfilter

Hey, it’s me again. =)

What I’ve noticed during the usage of the calendar widget (still :heart: it so much) is, that after the switch to the next day at 0:00 o clock, top row does not disappear. My solution - running on Linux - is to use xdotools and perform virtual key F5 for browser refresh at 0:00.

On picture below: green has the correct date and red is the wrong one.

1 Like

Hi @DeeZett,

Great Input thank you!

I still use it too on a Wall-mounted ipad sing Kiosker pro, which is refreshing it at fixed times- therefore did not experience this error.
But thanks for the fix!!
Best,
Matthias