@hopkins_core/calendar

Embeddable Caseflow Calendar component that renders the booking calendar inside an iframe with automatic height adjustment.

Installation

npm install @hopkins_core/calendar

Usage

import { CaseflowCalendar } from '@hopkins_core/calendar';

const App = () => {
  const handleBookingComplete = (booking) => {
    console.log('Booking completed:', booking);
  };

  return (
    <CaseflowCalendar
      className="my-calendar"
      link="https://hopkins.caseflow.com/calendar/h/abc123"
      onBookingComplete={handleBookingComplete}
    />
  );
};

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | className | string | No | CSS class name for the iframe element | | link | string | Yes | The URL of the Caseflow Calendar to embed | | title | string | No | Title attribute for the iframe (defaults to "Caseflow Calendar") | | onBookingComplete | (booking: Booking) => void | No | Callback fired when a booking is completed (booked successfully) | | onHeightChange | (height: number) => void | No | Callback fired when the content height is changed |

Features

• Auto-resize: The iframe height adjusts automatically based on the calendar content via postMessage.
• Booking callback: Receive a callback when a booking is completed.