React 19 · Temporal API · shadcn/ui

The React calendar built on Temporal

Week, month, day and agenda views with exact time zone and DST handling. Bring your own data and restyle every pixel.

Get startedView demo
pnpm add @moltenship/calendar
Live, in your time zone. Drag to move, resize or create events.

Correct time underneath. Your interface on top.

Temporal end to end

Events are Temporal instants and plain dates, never Date. Time zones, DST gaps and repeated hours resolve exactly.

Headless React, shadcn/ui views

State and navigation live in typed hooks and components. Views ship as shadcn/ui source you copy in and edit.

Typed adapters

Map your existing records with one adapter. Your ID and resource types reach every callback without casts.

SSR-safe

No browser globals at import time. Pass the time zone and clock, and server HTML hydrates without mismatches.

Your data, typed all the way through

  1. 1Describe your records with an event adapter.
  2. 2Create a calendar typed by those records.
  3. 3Use its hooks and components with your types, no casts.
Read the installation guide
calendar.ts
"use client";

import { createCalendar, defineEventAdapter } from "@moltenship/calendar";

interface Meeting {
  id: string;
  title: string;
  roomIds: string[];
  start: Temporal.Instant;
  end: Temporal.Instant;
}

export const Calendar = createCalendar<Meeting, { id: string }>()({
  eventAdapter: defineEventAdapter<Meeting>()({
    getId: (meeting) => meeting.id,
    getTitle: (meeting) => meeting.title,
    getResourceIds: (meeting) => meeting.roomIds,
    getInterval: ({ start, end }) => ({ kind: "timed", start, end }),
  }),
});