[Template] Scheduling page — calendar-first booking archetype
- Dominant language
- TypeScript
- Stars
- 13.1k
- Forks
- 1.1k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 669
Description
## Problem
Astryx ships `Calendar`, `DateInput`, `DateRangeInput`, and `TimeInput`, but none of the 43 page templates actually renders a calendar. The only occurrences of "Calendar" under `templates/pages/` are `CalendarIcon` in `detail-page` and a docs listing in `documentation`. `DateInput`, `DateRangeInput`, and `TimeInput` do not appear in any page template at all.
That leaves a gap for date-driven screens. An agent asked to build a booking page, an interview scheduler, or a shift planner has no page-level example to start from, so it wraps the calendar in hand-rolled markup instead of a proven frame.
## Evidence of demand
Date-driven pages are a standard archetype across product categories: booking and reservations, interview scheduling, shift and resource planning, appointment management, content calendars. MUI and Ant Design both ship calendar components, and products built on them converge on the same two-part frame — a calendar that drives a detail list for the selected day.
The pattern is also close to frames you already have. `incident-console` and `messaging-shell` are both frame-first archetypes where one pane drives another. A scheduling page is that same idea with a date as the selector.
## Why existing templates don't cover it
`table-page` and `library` handle browsing, but neither has a date as the primary axis. `form-two-column` and `contact-form` collect a date inside a form rather than using it as a navigational surface. No current template changes what the page shows when a date is selected.
## Proposed template
`scheduling` — a calendar-first frame where date selection drives a detail panel.
- `Layout` and `SideNav` frame, with `DateRangeInput` and `Selector` filters in the nav
- `Calendar` as the primary surface in the content area, holding selected-day state
- `LayoutPanel` on the right listing entries for the selected day, each an `Item` with `Avatar`, `Text`, `Timestamp`, and `StatusDot`
- `EmptyState` when the selected day has no entries
- `Dialog` for creating an entry, built from `DateInput`, `TimeInput`, `Field`, and `TextInput`
## Out of scope
No new components. No week or month view toggle in v1. No drag to reschedule. No recurrence rules.
## Doc entry
```js
{
type: 'page',
name: 'Scheduling',
displayName: 'Scheduling',
description: 'Calendar-driven scheduling page with a day detail panel',
isReady: true,
category: 'Scheduling - Calendar',
}
```
## Notes
Happy to reshape the composition before I start. I would follow the template grading rubric: layout primitives only, no inline styles, tokens throughout. CLA is signed.
Contributor guide
Research direction
Start by reviewing the existing page templates under templates/pages/, especially incident-console and messaging-shell, and inspect how the named components are composed. Build the scheduling page with the proposed calendar, selected-day detail panel, empty state, and entry dialog, then add the Scheduling documentation entry and verify it follows the template grading rubric.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100