Editors and workspaces

useSchedule

Provides props for schedule/agenda slot and event elements, and emits change details when a slot or event is interacted with.

Copy React example Schedule component

Live component preview · Astro

Explore Schedule

Try the component this hook connects to. The preview uses the Astro adapter; the React example below uses useSchedule.

Launch week

Planning

Ship

React usage

Import from @santi020k/lumen-react and spread the controller props onto the matching components.

import { Schedule, Card } from '@santi020k/lumen-react'
import { useSchedule } from '@santi020k/lumen-react'

export function WeekView() {
  const schedule = useSchedule({
    onChange: ({ eventId, slot }) =>
      console.log('Changed:', eventId, slot)
  })

  return (
    <Schedule {...schedule.rootProps}>
      <section {...schedule.getSlotProps('2025-01-06T09:00')}>
        <Card as="article" {...schedule.getEventProps('meeting-1')}>
          <strong>Team standup</strong>
          <p>9:00 – 9:30</p>
        </Card>
      </section>
    </Schedule>
  )
}

import { Schedule, Card } from '@santi020k/lumen-react'
import { useSchedule } from '@santi020k/lumen-react'

export function WeekView() {
  const schedule = useSchedule({
    onChange: ({ eventId, slot }) =>
      console.log('Changed:', eventId, slot)
  })

  return (
    <Schedule {...schedule.rootProps}>
      <section {...schedule.getSlotProps('2025-01-06T09:00')}>
        <Card as="article" {...schedule.getEventProps('meeting-1')}>
          <strong>Team standup</strong>
          <p>9:00 – 9:30</p>
        </Card>
      </section>
    </Schedule>
  )
}

Load @santi020k/lumen-react/styles.css once in your application. With React Server Components, put 'use client' at the top of the module that calls the hook. Follow the React setup guide for the framework boundary.

Options

Property	Type	Default	Description
onChange	(detail: ScheduleChangeDetail) => void	-	Callback fired when a schedule slot or event changes.

Controller return values

Property	Type	Description
rootProps	LumenProps<"section">	Spread onto the schedule root.
rootRef	RefObject<HTMLElement>	Ref to the schedule root.
getSlotProps	(slot, props?) => LumenProps<"section">	Returns props for a time slot element.
getEventProps	(eventId?, props?) => LumenProps<"article">	Returns props for an event element.
emitChange	(detail, root?) => void	Programmatically emit a schedule change detail.