Calendar Tetris: Representation Matters

Live | Repository Too many events all at once Let’s assume that we want to stack two calendar blocks, block_1 starts at 12:30 AM and ends at 02:00 AM, and block_2 starts at 01:00 AM and ends at 01:30 AM. To simplify things however, let’s just use their start and end times as minutes i.e. an event that starts at 12:30 AM would just be starting at minute 30. To display the blocks we’re going to use their start time as a top offset. Assuming that the day starts at minute 0, a block that starts at minute 30 will have a 30 px offset from the top. Keeping the page height in sync with the minutes in the day will make the offset math convenient. ...

February 12, 2023 4 min

Calendar Tetris: Intro

Live | Repository Motivation Earlier last year I was looking at various calendar applications by the standard providers (Apple, Google, Outlook etc) and realized that they handle event stacking differently. This is what they look like: Apple Apple takes the easy way out with reduced opacity to show overlaps. I can’t deduce how the ordering works here, as it’s quite mind boggling. Outlook This one is interesting, they seem to be using a tree to represent their calendar stacks. If you look at the sequence of events 1->5->2->3 they’re all of equal width. But the event #4 takes up rest of the column space, which hints at the fact that #4 has the information about whether there are more events downstream from it. ...

February 10, 2023 3 min