Showcase index
Start
Actions
Forms
Navigation
Authentication
Feedback
Content
Calendar
The agenda in its four views - month, week, day and list -, the rail’s small month and the drawer that creates an entry. No new dependency: the theme’s own tokens.
October 2026
<echo-calendar v-model:view v-model:date :events @create @open />
The pieces inside
The big calendar is one component; the small month is another; the date arithmetic is a utility file both of them use.
<echo-calendar-mini>
It is not the date picker in different clothes: that one is a FIELD (it fills a form, it opens over the page), this one is navigation and always visible. The dot under a day says there is something on it.
October 2026
app/utils/calendar.ts
All in LOCAL time and with no date library: adding days, finding the start of a week and comparing two days is the whole job, and `toISOString()` reads UTC - west of Greenwich, half the events would move a day back.
isoDay(date) // 2026-08-11, local
parseDay('2026-08-11T14:00')
monthGrid(month, weekStart) // 42 days, always
weekDays(date, weekStart)
eventsOfDay(events, day)For AI agents
This page’s specification
A Markdown file with this family’s tags, props, events and snippets, copyable verbatim, plus the rules that apply before any line of code. Hand it to the agent along with the task.
/agents/calendar.md