Calendar / upcoming events page

[petersuba]

Enhancement Summary

It would be very useful if we could have an optional "Calendar" page to show upcoming events from a set of calendars

Detailed Description

It is possible to integrate various calendars with Home Assistant (local, Google Calendar etc). Where a wall panel is located in a communal area, some people also have blackboards, sticky notes etc. to remind themselves of what is upcoming / what they need to do, especially with busy families where different people have different places to be.

It would be useful if instead of the manual boards, we could have a page (or pages) that could simply show an upcoming list of events from one or more calendars (i.e. a combined view). Ideally, tapping on an event, it would bring up its details.

Similar to how one can do it with the Lovelace Calendar card:

Additional Context

No response

[edwardtfn]

Help me on thinking how this should be implemented. On the panel as it is now, I can assign entities to the buttons and when clicking the buttons the detailed page will open or it will toggle the state of the entity. I think we should keep the same behavior, so users will be able to assign multiple calendar entities, one per button. Also, there's probably no toggle (like in other types), so this will always open the detailed page, where one will be able to see the calendar events (or at least a few of those). How should be the buttons? When they should show white (ON) and when it should be gray (OFF)? If one of those states will ever happens...

[petersuba]

So, in terms of behaviour, you are correct, they there is no point toggling the entities.

I think the main questions are

• layout
• automatic population of the entities on the page from the Calendars

I think colouring is part of the second bullet. What the Lovelace Calendar does is that it uses a coloured dot before the title of each event (see screenshot above with cyan colour) to denote the Calendar it pulled the event from, i.e. if there are 3 calendars, the entities will have one of 3 colour dots in front of them. Maybe if we don't have enough space for dots, we could use a background colour assignment for each Calendar entity on the Blueprint setup. I am not sure if this helps or not, but it could be a customisation. However, we could do this also with text colour. So we may be setting it up that if one calendar contains family birthdays, the text (or background) would be red, etc.

I actually think that the layout is more critical - the Lovelace Calendar uses different layout for the 3 different available views. I am not sure which ones are possible/practical to implement on the NSPanel. For me the most important view is something like what is in the screenshot, which is the 7 days lookahead list view - it basically provides at a glance if there is something that would need to be taken care of later today or in the next few days when we are preparing to get out of the house. I don't think we'd expect a lot of people to want to do monthly planning on the NSPanel, although if it is not so complex to implement, it is certainly useful to have a view of which dates have something on them. So what I am trying to say is if we are using the same layout as the buttons are, we need to be careful not to confuse people on the order of the events coming up - I think a thinner card but more of them stacked on top of each other is probably more useful than reusing the layout of the buttons. That said, if that's the only way it can be implemented, it is still much better than not having the option at all.

[edwardtfn]

I think we can build a view pretty similar to that one on your screenshot, and that could be the starting point, so we improve from there... The point about using the buttons, is due to the fact in this project buttons are used to open other pages, so in order to open the calendar page, I need a button either on the home page or in one of the button pages to call that... and define the behavior of this button is part of the game...

[petersuba]

Ah, I see.

I thought you could just swipe through the pages which could include the calendar page (pages) if they are configured. I didn't think to configure a button to open that page.

But let me think through the behaviour/position of the calling button.

• First of all, on the homepage, the logical positioning of the calling button would be to be similar to where the QR button is. I think that with more functionality soon you'd have to think maybe about dynamic usage of that space for the icons that have some configuration set up, this would enable a calendar icon here (so you'd have to check if QR code, alarm panel, calendar etc. are configured or not, and show the icons only for the ones that exist, but not "reserve a space" for anything unused but rather put the active ones next to each other). I think you can start "eating into" the custom icons if you need more space, i.e. the more "fixed page" functionalities are configured, the less custom icons would be put on the homepage.

• In terms of a button background behaviour for opening the calendar page, once again I am not sure there is a huge functional benefit, but if anything, I would think a different colour if there is an event on the calendar for today, may be helpful. So for example, normally the icon would be white, but if there is an event today, it would be light red. Again, not sure how much value it is.

[edwardtfn]

I just realized the calendar entity have an state which could be on or off and as I understood that will indicate if some activity is currently on time (between start and end times). Maybe we can yse that to show some button state.

The icon also changes between mdi:calendar-blank (off) and mdi:calendar-check in yellow (on).

[petersuba]

I think this may be useful in scenarios that I am not going to use it for :) For example, if we imagine an NSPanel per room entry outside for conference rooms, and we have a calendar for each room for its reservations, you could show whether the room is currently in use.

I can't however think of a useful scenario for home use because I expect this to serve mostly as a reminder on what is coming up, not what I have been late for :)

[NoFace3D]

I'd suggest to take inspiration from this calendar card: https://github.com/totaldebug/atomic-calendar-revive Having "event mode" for the beginning should be enough from my point of view.

[edwardtfn]

As I understood, those cards can show multiple calendars, is that correct? Would be ok if the first implementation could show only one calendar per time?

[NoFace3D]

As I understood, those cards can show multiple calendars, is that correct?

Yes

Would be ok if the first implementation could show only one calendar per time?

Yes

[petersuba]

Clearly, implementation capabilities / roadmap decisions is in your hands and not mine.

From my perspective I definitely need multiple calendars as there are different people entering different types of events in the family that would need to be shown together. Of course I could start with just displaying one of them, but I can already foresee the family discussion that results :)

[edwardtfn]

On the climate domain, we have an "special" climate entity which is the internal climate, with a link from the home page when you click the internal temperature. Then later we introduced the support for other climate entities which could be assigned to buttons.

For calendar, we can implement something similar like a main calendar on the home page, which an icon in a fix position, and that could have multiple calendar entities assigned to, however is much easier to implement the calendar based on a single entity, just like everything else in the panel, so you assign an entity to any button and by click on that button it will open the detailed page for that specific entity.

We certainly can do both, just wanna start with the easier one, so we can get feedback and improve it while we find a solution to the other one.

[edwardtfn]

I'd suggest to take inspiration from this calendar card: https://github.com/totaldebug/atomic-calendar-revive Having "event mode" for the beginning should be enough from my point of view.

On the event mode I see the progress bars... which progress is shown there?

[petersuba]

On the climate domain, we have an "special" climate entity which is the internal climate, with a link from the home page when you click the internal temperature. Then later we introduced the support for other climate entities which could be assigned to buttons.

For calendar, we can implement something similar like a main calendar on the home page, which an icon in a fix position, and that could have multiple calendar entities assigned to, however is much easier to implement the calendar based on a single entity, just like everything else in the panel, so you assign an entity to any button and by click on that button it will open the detailed page for that specific entity.

I may be misunderstanding this, or maybe we are talking about two slightly different use cases when we mean "multiple calendars".

The usage scenario I was imagining/describing was essentially a "merged" calendar page, where the events listed originate from multiple sources, but are displayed in a single page. I think what you are describing is different, i.e. it is a separate page displaying the entries in a specific Calendar on each page. I can see in that use case the way you describe it with climate entities, so if someone wants multiple calendar pages, each page itself displaying the entries in that calendar only. In that scenario it certainly makes sense to implement in a phased manner like you describe.

In the use case I was imagining, this phasing would not make sense, because in all cases I was imagining a SINGLE page to display the entries from multiple calendars. Think of it as follows:

• Dad has a calendar, containing all the commitments he has - entries are managed by him elsewhere
• Mom has a calendar, containing all the commitments she has - entries are managed by her elsewhere
• Child 1 has a calendar, containing all of his/her commitments - entries are managed by mum/dad
• There is a 4th calendar containing family events (e.g. birthdays of relatives) - entries are managed by mum/dad

What I would do as a display is to have a single list of upcoming events for the family next week, the list being populated from across all 4 of the calendars. The example screenshot at the top of this page shows selecting each of these calendars for inclusion, but the display is a single listing. In this example layout the source calendar is simply used to pick the colour of the dot in front of the entry, I think NoFace3D's example screenshot above the calendar name/reference is displayed as a "tag" for the event. Hope it makes sense.

[edwardtfn]

Hope it makes sense.

It does. :) It's clear the need of a multi-calendar solution.

But I still can see value on the single-entity step:

• It's easier to implement
• Can be totally reused to the next step (it is the same, but all the data come from a single calendar - like a multi-calendar, but with just one selected).
• It will enable feedback from someone with a different use case... maybe a single, with no child... 😜 Or someone with a panel sitting on his/her and not used by anyone else (like myself 😉, although I'm not planning to use the calendar from the panel for now).

Anyway, I'm not saying we should release the single-calendar version before releasing the multiple-calendar version. The difference between those two are quite small... Probably the biggest challenge is to find a place in the screen for an additional icon required by a multi-entity button.¨

When I start working at that I will update here.

[NoFace3D]

On the event mode I see the progress bars... which progress is shown there?

I'd say it's showing progress of the ongoing event.

[edwardtfn]

And what that means? I mean, how to calculate the current state for the progress bar?

[petersuba]

Looks like it's calculated as ( (current time - start time) / (end time - start time) ) Probably useful for scenarios where e.g. you have a panel outside of a conference room and the panel shows the room reservations. I.e. how far along is the current meeting happening in the room?

[NoFace3D]

And what that means? I mean, how to calculate the current state for the progress bar?

I guess, it's showing progress in percentage, or in hours. I am not sure, maybe you can find it in the docs https://docs.totaldebug.uk/atomic-calendar-revive/