Products
Modules
fullcalendar
A React calendar with month, week, and day views built in, extended with plugins for kinds of entries and new views.
0Uses of the any type in the source code, excluding tests and stories
- Period
- 2026.05 ~ Present
- Organization
- Firstage
- Role
- Design and implementation (solo)
- Runs on
- Frontend
- Key features
- Month, week, and day views lay out entries that span several days or overlap, and work from the keyboard. Kinds of entries and new views are added as plugins.
- Work and results
- Each calendar gets its own state store, so several calendars on one page never mix
- A domain such as schedules, campaigns, or bookings registers as one plugin, and custom views register the same way
- WAI-ARIA grid keyboard navigation, entries rendered as buttons, and axe accessibility checks in Storybook
- Calculations such as overlap layout and the current-time marker live in a pure-function package
- Tech stack
- React
- TypeScript
- dnd-kit
- Storybook
Background
Calendar screens use a different date library, translations, styling, and base components in each product, and what sits on the calendar differs too: schedules, campaigns, bookings. I built a type-strict calendar where those four plug in separately and new kinds of entries arrive as plugins.
Decisions and implementation
- The calendar is split into five packages: the assembly (fullcalendar), plugin contracts and registries (registry), pure calculations (features), a drag-and-drop adapter (dnd), and shared types and date tools (shared). Drag and drop is added only when needed.
- State lives in a store created per calendar, so several calendars on one page never mix their state.
- Date formatting and time zones, interface text, per-slot classes, and base components arrive through four independent injection channels. Swapping dayjs for luxon leaves translations, styling, and drag and drop untouched.
- Entry kinds, views, and features are all plugins registered with a registry. Month, week, and day views come built in, and column views such as a three-day view are made with
createColumnsView. - Cells follow the WAI-ARIA grid keyboard model, and entries render as buttons. On touch screens the month view switches to compact cells that summarize the day’s entries, and tapping a date opens it.
- There is no
any;exactOptionalPropertyTypesis on, and branches go through exhaustive discriminated unions.
Current status
axe accessibility checks run in CI through the package Storybook. No product screen uses the calendar yet.