facebook / facebook/astryx

[Template] Scheduling page — calendar-first booking archetype

Open
#4,523 1 comment 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.