z-cal

    Inspiration and reference implementations

    A curated list of calendar implementations worth studying when designing or refining z-cal behavior. Each entry notes what it does well so you can go straight to the relevant part instead of re-discovering it. Add to this list when you find something good; prune entries that go stale.

    None of these are dependencies. They are references for interaction design, layout, theming, and API shape. Check licenses before copying code rather than ideas.

    Libraries

    super-calendar

    Look at it for:

    • Gesture-first navigation. Every view is virtualized and snap-paged, so swiping between weeks or months feels like a native pager. Directly relevant to z-cal's swipeNavigation.
    • Pinch-to-zoom on the time axis, and drag to move, resize, and create events across days.
    • Views: month, week, day, 3-day, and schedule list.
    • The core/renderer split. Grid building, date-range hooks, and selection helpers are pure functions with no renderer imports. A useful model for keeping z-cal's layout logic testable.
    • Generic event typing, recurring events, and timezone display.

    FullCalendar v7

    Look at it for:

    • The formal theme system. Four standard themes (Monarch, Forma, Breezy, Pulse), each with dark mode, plus Tailwind-friendly styling and Shadcn and MUI theme packages for React. Worth comparing against z-cal's theme tokens in styling.md.
    • The slimmed DOM. v7 removed nested tables in favor of flexbox, which improved accessibility, responsiveness, and print output. Their ARIA attributes and popover keyboard navigation pass Axe.
    • Print handling, including background events and multi-page output.
    • The option surface. Most z-cal users come from FullCalendar, so its naming is the baseline for migration.md.

    Schedule-X

    Look at it for:

    • Responsive behavior and internationalization as first-class goals.
    • Framework-native component injection: users pass their own React or Vue components into slots inside the calendar. Compare with z-cal's React content slots in react.md.
    • A plugin architecture similar in spirit to z-cal's DayGrid, TimeGrid, Interaction split.

    EventCalendar (vkurko/calendar)

    Look at it for:

    • A small, FullCalendar-compatible feature set done with CSS Grid instead of tables. Good proof that day, week, month, list, and resource timeline views fit in a light bundle.
    • Resource views with nested resources and resource filtering.
    • Its callback and option naming, which mirrors FullCalendar closely.

    react-big-calendar

    Look at it for:

    • The most widely used React calendar, so its API is a second familiarity baseline after FullCalendar.
    • The localizer abstraction, which decouples the calendar from any one date library. z-cal uses Temporal, but the adapter shape is still instructive.
    • Its drag-and-drop addon as an example of interaction shipped as an optional layer.

    Shadcn and Tailwind examples

    These are app-level implementations rather than libraries. They are good references for visual polish, dark mode, and how a modern product calendar is expected to look.

    Big Calendar (lramos33)

    Look at it for: agenda, year, month, week, and day views; drag-and-drop rescheduling; a live time indicator; configurable working hours with distinct styling; multi-user filtering; dark mode.

    Origin UI Event Calendar

    Look at it for: clean month, week, day, and agenda views with all-day handling and event colors. Explicitly alpha, so treat it as a visual reference rather than a behavioral one.

    Product calendars

    Closed source, but the best benchmarks for interaction feel. Use them when deciding how something should behave rather than how to implement it.

    • Google Calendar: the default mental model for most users. Drag-to-create, overlap layout in the week view, the "more" popover in month view, and keyboard shortcuts (t, j, k, d, w, m).
    • Notion Calendar (formerly Cron): keyboard-driven navigation, command menu, multi-timezone columns, and restrained animation. A good reference for motion and density.
    • Fantastical: natural-language event entry, and a polished list plus grid combination.
    • Apple Calendar on iOS and macOS: swipe paging between periods, pinch-to-zoom on the day view, and how the month view collapses to a week on smaller screens.

    Where z-cal already borrows

    • Swipe paging between periods: super-calendar and Apple Calendar.
    • Timed events reclaiming unused space: closer to Google Calendar's overlap layout than to FullCalendar's column packing.
    • Option naming and the migration path: FullCalendar.
    • Theme tokens and dark mode: FullCalendar v7's theme system and the shadcn examples.

    Adding an entry

    Include the demo URL, the source URL if public, the stack in one line, and two to five bullets on what specifically to look at. Skip entries that only duplicate something already listed.