schedule display and editing
Grid of day cards, inline edits, custom events. Related: Timeline, Export.
Architecture#
flowchart TB Home[HomeContent] --> Disp[ScheduleDisplay] Disp --> Cards[day cards] Disp --> Edit[EditEventDialog] Disp --> Act[ActionButtons] Ctx[UserContext] --> Disp
website/components/schedule/schedule-display.tsx renders editedSchedule || schedule. The capture root is #schedule-display.
Grid#
1 column on phones, 2 from md, 3 from lg. Each day is a glass card. Slots sort by time string. formatTime only inserts spaces around -.
Colors#
flowchart LR L[Lecture] T[Tutorial] P[Practical] C[Custom] classDef lecture fill:#35;F0BB78,stroke:#35;543A14,color:#35;111111 classDef tutorial fill:#35;543A14,stroke:#35;F0BB78,color:#35;FFFFFF classDef practical fill:#35;FFF0DC,stroke:#35;543A14,color:#35;111111 classDef custom fill:#35;FF9B50,stroke:#35;543A14,color:#35;111111 class L lecture class T tutorial class P practical class C custom
Labels: Lecture, Tutorial, Practical, Custom.
Event card#
Subject, type badge, clock + formatted range, pin + location. Edit icon opens the dialog with { day, time, event }. Plus on the day header opens the same dialog with an empty event (custom).
EditEventDialog#
website/components/timeline/edit-event-dialog.tsx
flowchart LR Open[click card or Plus] --> Form[subject, type, location, time] Form --> Save[clone schedule into editedSchedule] Form --> Del[remove slot]
Save writes editedSchedule (copy of current display, then mutate). Custom rows set type: "C" and isCustom. Delete drops that timeslot. Provider persists editedSchedule.
Action buttons#
website/components/timeline/action-buttons.tsx on the grid: PNG, PDF, iCal, Google Calendar, copy URL, jump to /timeline. Exports use editedSchedule || schedule. PNG/PDF go to /timeline?download=1 first.
Context lifecycle#
stateDiagram-v2 [*] --> Empty Empty --> Base: generate Base --> Edited: save dialog Edited --> Base: new generate clears edits