Skip to content

Changelog

All notable changes to the CalendarJS React components and the @calendarjs/react package.

  • Hooks — useCalendar, useSchedule, useTimeline return a callback ref plus a reactive instance (null before mount, the lemonadejs instance after). Drop-in alternative to manual useRef for state-driven toolbars and conditional rendering. Hooks reference →

  • data-* / aria-* / role passthrough on the wrapper <div> for Playwright, React Testing Library, and screen readers.

    <Schedule data-testid="weekly-schedule" aria-label="Class timetable" data={events} />
  • Input vs resolved type split — new Schedule.EventInput and Timeline.ItemInput types accept loose input (only start / date required) and include an index signature for app metadata. The strict Schedule.Event / Timeline.Item are what callbacks and getData() hand back. No more as any to attach class_id, teacher_id, etc. TypeScript guide →

    const events: Schedule.EventInput[] = [
        { start: '09:00', end: '10:00', class_id: 42, teacher_id: 7 },
    ];
    const onCreate = (created: Schedule.Event[]) => { /* strict shape */ };
  • onCreate / onBeforeCreate always receive an array (Event[], length ≥ 1). The legacy Event | Event[] union has been dropped. Existing handlers using Array.isArray(events) ? events : [events] can drop the unwrap.
  • addEvents, setData, updateEvent.newValue now accept the loose EventInput shape (or Partial<EventInput> for newValue). getData() still returns the resolved Event[].
  • Type namespaces re-exported through @calendarjs/react — import type { Schedule as ScheduleNS } from '@calendarjs/react' now resolves ScheduleNS.Event, ScheduleNS.EventInput, ScheduleNS.Options, ScheduleNS.Instance directly. Same for Timeline and Calendar namespaces.
  • New Hooks page — useCalendar / useSchedule / useTimeline reference and composition patterns.
  • New TypeScript page — input vs resolved types, typed refs, app metadata.
  • Getting Started expanded with controlled-vs-imperative guidance, reference identity, and useCallback memoization notes.
  • Single-package install for all three React components: Calendar, Schedule, Timeline
  • Idiomatic React API:
    • camelCase callback props — onChange, onCreate, onUpdate, onClose, onOpen, onChangeEvent, onBeforeChange, onBeforeCreate, onBeforeChangeEvent, onBeforeInsert, onDelete, onError, onEdition, onDblClick
    • self stripped from callback signatures — user handlers receive just the relevant arguments; the instance is available via the forwarded ref
    • Controlled-component support — pass value + onChange and the parent becomes the source of truth
    • React.memo wrapping — skips effect reruns when props haven't changed
    • useImperativeHandle — exposes the instance through the forwarded ref idiomatically
    • className / style / children passthrough on the wrapping <div>
    • Stale-closure protection — callback props always invoke the latest handler (no frozen closures on parent rerenders)
  • Helpers re-exported from the aggregate package
  • TypeScript types for all React-idiomatic prop shapes

Breaking changes (vs individual @lemonadejs/<plugin>/dist/react wrappers)

Section titled “Breaking changes (vs individual @lemonadejs/<plugin>/dist/react wrappers)”
  • Calendar: the legacy onChange prop (capital C) — previously wired to the bound input element's native DOM change event — is renamed to onInputChange. onChange is now the date-selection callback, matching React convention. Migration: rename onChange → onInputChange for the DOM input handler.
  • Timeline item editable property and component onEdition event
  • Calendar component with date / range / time selection
  • Schedule component with day / week / weekdays views
  • Timeline component for chronological events
  • Date helpers library
  • TypeScript definitions
  • React / Vue / Angular support
  • Initial release fixes