Every resource.Every moment.Your product.

import { SuperSchedulerComponent } from 'super-scheduler'
import type { SuperScheduler } from 'super-scheduler'
import 'super-scheduler/styles.css'

const rooms: SuperScheduler.ResourceData[] = [
  { id: 'studio-a', name: 'Studio A' },
  { id: 'studio-b', name: 'Studio B' },
]

const bookings: SuperScheduler.EventData[] = [
  {
    id: 'shoot-01',
    resource: 'studio-a',
    text: 'Product shoot',
    start: '2026-10-02',
    end: '2026-10-04',
  },
  {
    id: 'edit-01',
    resource: 'studio-b',
    text: 'Edit',
    start: '2026-10-04T09:00:00',
    end: '2026-10-04T17:00:00',
  },
]

export function Planning() {
  return (
    <div style={{ height: 480 }}>
      <SuperSchedulerComponent
        startDate="2026-10-01"
        days={14}
        scale="Day"
        cellWidth={56}
        timeHeaders={[{ groupBy: 'Month' }, { groupBy: 'Day', format: 'd' }]}
        height="100%"
        resources={rooms}
        events={bookings}
      />
    </div>
  )
}

import { useMemo, useState } from 'react'
import { SuperSchedulerComponent } from 'super-scheduler'
import type { SchedulerEventsChangeArgs, SuperScheduler } from 'super-scheduler'

type Booking = SuperScheduler.EventData<{ locked?: boolean }>

export function BookingBoard({
  rooms,
  initial,
}: {
  rooms: SuperScheduler.ResourceData[]
  initial: Booking[]
}) {
  // Your state is the source of truth; the scheduler gets a copy it may mutate.
  const [bookings, setBookings] = useState(initial)
  const events = useMemo(() => bookings.slice(), [bookings])

  return (
    <SuperSchedulerComponent
      startDate="2026-10-01"
      days={31}
      scale="Day"
      resources={rooms}
      events={events}
      allowEventOverlap={false}
      // While dragging: explain why a drop is not allowed.
      onEventMoving={(args) => {
        if ('locked' in args.e.data && args.e.data.locked === true) {
          args.allowed = false
          args.message = 'This booking is confirmed and locked.'
        }
      }}
      // Before the commit: ask your server, then accept or cancel.
      onEventMove={(args) => {
        args.async = true
        saveBooking({
          id: String(args.e.id()),
          resource: String(args.newResource),
          start: args.newStart.value,
          end: args.newEnd.value,
        }).then(
          () => args.loaded(),
          () => {
            args.preventDefault()
            args.loaded()
          },
        )
      }}
      onEventsChange={({ events: next }: SchedulerEventsChangeArgs) => setBookings([...next])}
    />
  )
}

import { SuperSchedulerComponent } from 'super-scheduler/react-render'
import type { SuperScheduler } from 'super-scheduler'
import 'super-scheduler/styles.css'

interface Stay {
  guest: string
  nights: number
  paid: boolean
}

/** Event data comes back untyped from the engine: read your fields explicitly. */
function readStay(data: object): Stay | null {
  if (!('guest' in data) || !('nights' in data) || !('paid' in data)) return null
  const { guest, nights, paid } = data
  return typeof guest === 'string' && typeof nights === 'number' && typeof paid === 'boolean'
    ? { guest, nights, paid }
    : null
}

export function RichPlanning({
  rooms,
  stays,
}: {
  rooms: SuperScheduler.ResourceData[]
  stays: SuperScheduler.EventData<Stay>[]
}) {
  return (
    <SuperSchedulerComponent
      startDate="2026-10-01"
      days={30}
      scale="Day"
      resources={rooms}
      events={stays}
      // React content inside each event; width is quantized, so it re-renders rarely.
      renderEvent={({ e, width }) => {
        const stay = readStay(e.data)
        if (stay === null) return e.text()
        return (
          <span className="stay">
            <strong>{stay.guest}</strong>
            {width >= 120 ? <small>{stay.nights} nights</small> : null}
            {stay.paid ? null : <span className="stay__due">Due</span>}
          </span>
        )
      }}
      eventHover={{
        pin: 'click',
        render: ({ e, close }) => {
          const stay = readStay(e.data)
          return stay === null ? null : <StayCard stay={stay} onClose={close} />
        },
      }}
    />
  )
}

function StayCard({ stay, onClose }: { stay: Stay; onClose: () => void }) {
  return (
    <section aria-label={stay.guest}>
      <h3>{stay.guest}</h3>
      <p>
        {stay.nights} nights · {stay.paid ? 'Paid' : 'Payment due'}
      </p>
      <button type="button" onClick={onClose}>
        Close
      </button>
    </section>
  )
}

/* planning.css: the scheduler follows your tokens and your dark mode. */
.planning {
  --super-scheduler-accent-rgb: 25 97 68;
  --super-scheduler-surface: #fcfaf6;
  --super-scheduler-border: #ddd8d2;
  --super-scheduler-event-radius: 7px;
  --super-scheduler-today-bg: rgb(25 97 68 / 0.06);
  --super-scheduler-selection: rgb(25 97 68 / 0.12);
  font-family: 'Geist', system-ui, sans-serif;
}

[data-theme='dark'] .planning {
  --super-scheduler-accent-rgb: 110 214 166;
  --super-scheduler-surface: #16181c;
  --super-scheduler-border: #2e3134;
}

.planning .super-scheduler__event[data-selected='true'] {
  outline: 2px solid rgb(var(--super-scheduler-accent-rgb));
}