React

@forcecalendar/react is a thin adapter around the <forcecal-main> Web Component: props map to attributes, DOM events map to callbacks. It has no dependencies beyond its peers.

Install

npm install @forcecalendar/react @forcecalendar/core @forcecalendar/interface

Use

import { ForceCalendar } from '@forcecalendar/react';

export default function Scheduling() {
  return (
    <ForceCalendar
      view="month"
      timezone="America/New_York"
      height="600px"
      onDateSelect={({ date }) => console.log('selected', date)}
      onEventAdded={detail => console.log('added', detail)}
    />
  );
}

Props

Callbacks

onEventAdded, onEventUpdated, onEventDeleted, onDateSelect, onViewChange, onNavigate — each receives the detail object of the corresponding calendar-* DOM event.

Next.js / SSR

The adapter is SSR-safe out of the box: the custom elements are registered client-side only (inside useEffect), so server rendering emits the tag without touching browser APIs. No dynamic(() => ..., { ssr: false }) workaround is needed.