CSS calendar and time-planner examples

Calendars and time planners are a natural fit for radial layouts — time is cyclical, and a circle expresses that more honestly than a grid does. Orbit lets you build year-at-a-glance dials, Chronodex-style day planners, and bullet-journal-inspired schedules out of plain HTML and CSS, which means they can be themed, animated, and updated from JavaScript like any other component.

Below: a circular year calendar worth its own page, plus a Chronodex day-planner example inline as a quick reference.

Spokes

Circular year calendar A full year on a single dial — months, days, seasons and a centered year label. Best for personal-planner apps, year-in-review dashboards.

Quick reference: Chronodex day planner

A Chronodex is a radial day planner where each hour of the day is a wedge, and you fill the wedge to mark how you spent (or plan to spend) that time. It started as a paper-journaling technique and translates beautifully to CSS — every wedge is just a sector of an arc on an orbit.

HTML

CSS

vue

Related

• <o-arc> element reference — for curved sector wedges
• <o-progress> element reference — used for the central time-elapsed ring
• Use case: fitness and health apps — daily activity rings share the same building blocks