Playground

import { SuperSchedulerComponent } from 'super-scheduler'
import { createHistory } from 'super-scheduler/history'
import type { SuperScheduler } from 'super-scheduler'
import 'super-scheduler/styles.css'
import './my-planning.css'

// One history per board, created once (not on every render).
const history = createHistory()

interface PlanningProps {
  resources: SuperScheduler.ResourceData[]
  events: SuperScheduler.EventData[]
}

export function Planning({ resources, events }: PlanningProps) {
  return (
    <div className="my-planning" style={{ height: 560 }}>
      <SuperSchedulerComponent
        startDate="2026-10-12"
        days={14}
        scale="Day"
        cellWidth={72}
        timeHeaders={[{ groupBy: 'Week' }, { groupBy: 'Day' }]}
        density="comfortable"
        rowHeaderWidth={150}
        rowHeaderWidthAutoFit={false}
        treeEnabled={false}
        allowEventOverlap={false}
        showNonBusiness
        durationBarVisible={false}
        height="100%"
        resources={resources}
        events={events}
        history={history}
      />
    </div>
  )
}

/* SuperScheduler theme (light). Put the class on the element that wraps the scheduler, */
/* and pass density="comfortable" to SuperSchedulerComponent. */
.my-planning {
  --super-scheduler-accent-rgb: 25 97 68;
  --super-scheduler-surface: #fcfaf6;
  --super-scheduler-surface-raised: #f6f3ee;
  --super-scheduler-text: #161b22;
  --super-scheduler-text-muted: #4a5058;
  --super-scheduler-border: #ddd8d2;
  --super-scheduler-row-line: #ddd8d2;
  --super-scheduler-grid-line: #e9e6e0;
  --super-scheduler-selection: rgb(25 97 68 / 0.12);
  --super-scheduler-selection-border: rgb(25 97 68 / 0.75);
  --super-scheduler-focus-ring: rgb(25 97 68 / 0.5);
  --super-scheduler-today-bg: rgb(25 97 68 / 0.06);
  --super-scheduler-weekend-bg: rgb(0 0 0 / 0.025);
  --super-scheduler-hover-cell: rgb(25 97 68 / 0.06);
  --super-scheduler-hover-row: rgb(25 97 68 / 0.03);
  --super-scheduler-event-radius: 7px;
  --super-scheduler-event-bg: #dee6df;
  --super-scheduler-event-border: #b3c9bd;
  --super-scheduler-event-text: #124631;
  --super-scheduler-event-bar: #196144;
}