@bimetal/react

React calendar component with month, week, day, and agenda views. Built on @bimetal/core, @bimetal/data, and @bimetal/rules.

Installation

npm install @bimetal/react @bimetal/data

Quick Start

import { Calendar } from '@bimetal/react';
import '@bimetal/react/styles';
import { createCalendarStore } from '@bimetal/data';

const store = createCalendarStore();

function App() {
  return (
    <Calendar
      store={store}
      config={{
        core: { timezone: 'Europe/Berlin' },
        locale: myLocale,
        categories: myCategories,
      }}
    />
  );
}

Features

• 4 Views: Month, Week, Day, Agenda
• Drag & Drop: Move and resize events (all-day and timed)
• Undo/Redo: Toast with undo button + Ctrl+Z / Cmd+Z
• Event History: Full event-sourcing timeline per event
• Rules Integration: Optional rules via rules prop
• Localization: Full i18n via CalendarLocale
• Theming: CSS Custom Properties

Props

interface CalendarProps {
  store: CalendarStore;           // from @bimetal/data
  rules?: CalendarRule[];         // from @bimetal/rules
  darkMode?: boolean;
  showCategoryFilter?: boolean;
  config?: {
    core?: Partial<CoreConfig>;   // timezone, granularity, weekStart, workingHours
    locale?: Partial<CalendarLocale>;
    categories?: Category[];
    clickThresholdMs?: number;
  };
}

With Rules

import { warnOnOverlap, minGranularityDuration } from '@bimetal/rules';

<Calendar
  store={store}
  rules={[warnOnOverlap, minGranularityDuration]}
  config={...}
/>

Locale

const localeDe: CalendarLocale = {
  code: 'de-DE',
  dayNamesShort: ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'],
  views: { month: 'Monat', week: 'Woche', day: 'Tag', agenda: 'Liste' },
  today: 'Heute',
  newEvent: 'Neues Ereignis',
  editEvent: 'Ereignis bearbeiten',
  // ... see CalendarLocale interface for all fields
};

Theming

Style via CSS Custom Properties on .calendar:

.calendar {
  --cal-color-primary: #007AFF;
  --cal-color-bg: #ffffff;
  --cal-color-text: #1a1a1a;
  --cal-color-border: #e0e0e0;
  --cal-font-family: -apple-system, sans-serif;
  /* ... */
}

Exported Hooks

For advanced composition:

| Hook | Description | |------|-------------| | useEventActions(store) | Dispatch commands: move, resize, save, delete | | useDragPreview(events) | Drag-over preview state management | | useCalendarContext() | Access events, drag state, event handlers | | useCalendarConfig() | Access merged config (core + locale + categories) |

Re-exports

For convenience, @bimetal/react re-exports everything from @bimetal/core, @bimetal/data, and @bimetal/rules. You can import all types and functions from a single package.