Zoom capabilities

[neoromantic]

There is an expected feature of zooming, at least in day view: that would allow you to change how many hours is seen in a view.

I suggest to make something extra: seamless zooming from level of event, to years and years, in great spirit of Jef Raskin.

It would work basically as infinite zoomable canvas.

• we still have separate views: day, week, month and year, meaning that at some thresholds the layout of calendar changes. For example, moving from week to a month is very distinctive: instead of left-to-right columns of days, we now get this grid-like approach.
• the closest zoom level is a new Event View, which is not sidebar nor modal, it just takes the whole viewport
• zooming out, you seamlessly get into Day View, where event is, as usual, a block on a day, represented by rows.
• zooming out more, day view gets more and more hours in a viewport, at least up to 24
• zooming out more, we get into week view, which starts as "just a bit more than 1 day" view and zooming out all up to 7 days, as usual
• as you guessed, then we would get 2-3 week view, zooming out, all back to month view.

Notes:

• in Event View, there are many possibilities, since we have all this extra space
• in Day View, there might be some improvements, since it's never reasonable to have full-width event, it just sits there empty.
• as for number of hours, it can be suggested that calendar should encompass whole 24h period, instead of normal "work hours". There is sleep tracking, there are people living on non-24h schedules, and even best of us tend to go to bed later on fridays. It doesn't make sense to constraint day/week view to 12 hours, instead 24h view should be preferred, with option to zoom in (both in horizontal and vertical axis)
• transitions between various zoom levels should be seamless and implemented with React View Transitions and Motion.dev's capabilities.

[JeanMeijer]

Sounds really interesting. Do you have an example or can you build a prototype?

[neoromantic]

Sounds really interesting. Do you have an example or can you build a prototype?

tried to build one, seems quite promising when using, but needs more work to be demoable. Will continue work.

[neoromantic]

https://v0.dev/chat/zoomable-calendar-po-c-r3ouvIjiYEx, you may see some of my efforts here

[neoromantic]

So, I've had some time to try it again, take a look: https://zui.goodit.dev/

Very interested what you think about it.

My future thoughts:

• obviously, a lot finesse needed in transitions, zoom dynamics, little text rendering nuances. Make way better full event view.
• expand zoom out further to show months view (again, infinite canvas, where months are side by side, making up full year)
• if user is well-structured person who sleeps at the same time every day (not me), then we are able to "fold" those hours into night-time, making calendar more reasonable.
• start to utilize this functionally: this kind of view is great for overlaying data over it, first candidate being sleep-tracking from Apple Health or Whoop. Maybe have weather overlays, etc. Consider PoC weather overlay I already did.

Do you think some of these ideas might be relevant for analog?

Maybe, we can set it up as separate app, and extract common features (core calendar capabilities) as packages in this monorepo?

@JeanMeijer