Calendar views

Three views (Month, Week, Day), swapped with the pill at the top of the Calendar tab. Plus the Events tab, which is a list rather than a grid.


Month

A seven-column grid, starting on whichever day your Country setting says the week starts (Monday in the UK).

Multi-day events draw as a continuous bar across the days they cover, with a chevron end where the bar runs past the edge of a week and continues on the next row, so you can tell "ends Friday" from "carries on into next week" at a glance. Longer events get their lanes allocated first, so a one-day event can't cut a five-day bar in half.

Time periods — holidays, time off — draw the same way, which is the point of them: a fortnight away reads as one bar with the title written once, not as fourteen identical chips.

When a day has more events than fit, the surplus collapses into a dotted +N chip.

Tapping a day selects it. On a phone that opens a sheet with the day's events; on a tablet or desktop the day agenda rail on the right updates instead.

How a name is fitted

A day is about eight letters wide on a phone, so a name like Volunteering is wider than the pill holding it. Rather than break the word wherever the space runs out, Calendite fits the name in three steps and stops at the first one that works.

  1. Shrink. The text steps down a little, to a fixed smallest size, with every word kept whole.
  2. Borrow. The pill reaches a few points into a neighbouring day, but only when that day has width to spare — nothing is squeezed to make room for something else. An empty Thursday gives freely; a Thursday whose own name only just fits gives nothing.
  3. Shorten. Only now is a word cut, and it is cut the way an abbreviation is written: kept from the front, ended on a consonant, never fewer than three letters, and long enough that no other event on screen starts the same way.

So Volunteering - Ashford reads Volunt… over Ashford, not "Voluntee" over "ring". Appointment becomes App…, the abbreviation you would have written yourself. Physiotherapy becomes Phys… rather than "Physiot…", because a cut never splits a pair of letters that make one sound.

Two consequences worth knowing:

  • The company a name keeps changes how it is cut. A cut has to be long enough to tell an event apart from the others on screen, so Volunteering can shorten to Vol… in a quiet month, but keeps more of itself in a month that also holds Volunteers Meeting.
  • A name with more words than will fit keeps its first words whole and ends with an ellipsis, rather than squeezing every one. Lunch with Mum reads Lunch over with…, never "Lun…".

The name is never dropped entirely. Even at its shortest a pill carries the start of the event's name, and the full name is one tap away.


Week: the transposed view

Every other calendar puts days in columns and time down the page. The consequence is that a one-hour meeting gets a sliver of width and its title is cut to a few characters.

Calendite rotates it. Dates run down the left edge, time runs across. An event's width is its duration: a four-hour meeting gets four hours' worth of room for its title.

The trade-off is that a whole day no longer fits a phone's width, so the time axis scrolls sideways. It opens at 08:00.

What follows from the rotation:

  • All seven days always fit the screen height. Row height is the available space divided by seven. Opening the filter tray overlays the grid rather than squashing it.
  • Overlapping events stack vertically. Width is already spent representing time, so a clash splits the row into lanes.
  • Labels adapt rather than truncate. Each block picks the best of five modes for the room it has: title with times inside; title alone; label spilled onto the empty grid to the right; spilled to the left; or, when boxed in on both sides, the title rotated 90° to read down the block.
  • Long events keep their titles in view. The title tracks your scroll position along its own bar, clamped inside it, so it stays readable while any part of the block is on screen.
  • Inner events are pills. The bottom of a parent block darkens into a strip carrying one rounded pill per inner event, placed proportionally within the parent's span.
  • All-day events are full-width bands stacked on top of the row.
  • Time periods appear on every day they cover, not just the day they begin, so a holiday running into this week still shows here.
  • Tap is peek, not jump. Tapping any block, band or pill opens a small popover with the name and time; tapping that opens the event. So even a rotated, boxed-in event is two taps from its detail.
  • Tapping a date in the left column switches to Day view for that date.

On a tablet the rows are more than twice as tall, so block text scales up with them (up to double). The chrome (the date column and hour ruler) deliberately doesn't scale.


Day

A classic vertical time grid: hours down the page, full midnight to midnight, opening at 08:00.

Its distinctive trait is that it scrolls continuously through days. Keep scrolling past midnight and you roll into the next day, indefinitely: no paging, no swipe gesture to learn.

Events that clash split the column side by side. An event with inner events gets a "folder tab" (a solid tab above a tinted body), and when scrolling carries the tab off screen the parent's label re-pins to the block's edge, so you always know which block you're inside.


The Events tab

A scrolling list of what's coming up, rather than a grid. It has the same tag filter as the calendar.

A time period is listed once, on the day it starts, rather than once for each day it covers — a fortnight away would otherwise fill the list with fourteen copies of itself. It gives its length and the day it runs to instead of a time: 5 days · until 31/08/2026.

Note that an event can be hidden from some views and not others: visibility is set per view (Month / Week / Day / Events). A noisy daily recurrence can be visible in Day and hidden in Month so it doesn't drown the grid. See the event form's Visibility option.


Filtering

A pull-up tray at the bottom of the calendar holds your tags as chips. Tap one to filter.

Filtering does something more useful than hiding: it changes what the colours mean.

  • No filter: every event is coloured by its tag, so you read the calendar by category at a glance.
  • One tag selected: events with that tag switch to their own individual colours, so you can tell Early Shift from Late Shift within Work. Everything else fades to a washed-out ghost, still visible but clearly out of focus.

So filtering zooms in rather than deleting things. There's also a Show Hidden chip for temporarily revealing events hidden from the current view.

On tablet and desktop the tray disappears and the filters live in the sidebar permanently.


Large screens

The layout responds to window width, not device type, so a split-screen phone behaves like a phone, and a desktop window adapts as you drag it.

Width Layout
under 600dp phone: bottom nav, pull-up filter tray, modal day sheet
600–839dp icon rail replaces the bottom nav
840dp and up full sidebar with filters + content + day agenda rail on the right

At the largest size all three views share a day agenda rail on the right showing the selected day's all-day and scheduled events, which replaces the phone's modal sheet.

Phones stay portrait-locked; tablets are free to rotate.


Large text

If you turn your system font size up, several things change independently of window size: hour labels shorten from 08:00 to 8, day headers stack, and month-grid pills drop their text and keep just the coloured bar, so the grid stays scannable and the full title is one tap away.


Next