Calendar

import { Calendar } from 'fluxo-ui';
import type { CalendarEntry } from 'fluxo-ui';

const entries: CalendarEntry[] = [
  {
    id: '1',
    title: 'Team Standup',
    start: new Date(2025, 8, 15, 9, 0),
    end: new Date(2025, 8, 15, 9, 30),
    color: '#3b82f6',
  },
  {
    id: '2',
    title: 'Sprint Planning',
    start: new Date(2025, 8, 15, 10, 0),
    end: new Date(2025, 8, 15, 11, 30),
    color: '#8b5cf6',
    editable: true,
  },
];

<Calendar
  entries={entries}
  initialView="timeGridWeek"
  height={600}
  editable
  selectable
  nowIndicator
  showNavigationPicker
/>

<Calendar
  entries={entries}
  renderEntry={(entry, context) => (
    <div style={{ padding: '2px 4px' }}>
      <strong>{entry.title}</strong>
      {!context.isCompact && (
        <div style={{ fontSize: '0.7rem', opacity: 0.8 }}>
          {entry.data?.location}
        </div>
      )}
    </div>
  )}
/>

<Calendar
  entries={entries}
  slotDuration={15}
  visibleHoursStart={8}
  visibleHoursEnd={20}
  firstDayOfWeek={1}
  timeFormat="24h"
  businessHours={{
    daysOfWeek: [1, 2, 3, 4, 5],
    startTime: '09:00',
    endTime: '17:00',
  }}
  hiddenDays={[0, 6]}
  rowBanding
  nowIndicator
  navLinks
/>

<Calendar
  entries={entries}
  onEntryClick={(entry, event) => {
    console.log('Clicked:', entry.title);
  }}
  onDateSelect={(info, event) => {
    console.log('Selected:', info.start, '-', info.end);
  }}
  onEntryDrop={(info, event) => {
    console.log('Moved:', info.entry.title, 'to', info.newStart);
  }}
  onEntryResize={(info, event) => {
    console.log('Resized:', info.entry.title);
  }}
  onEntryContextMenu={(entry, event) => {
    console.log('Right-click:', entry.title);
  }}
/>

import { useRef } from 'react';
import { Calendar } from 'fluxo-ui';
import type { CalendarApi } from 'fluxo-ui';

const MyComponent = () => {
  const calendarRef = useRef<CalendarApi>(null);

  return (
    <>
      <button onClick={() => calendarRef.current?.prev()}>
        Previous
      </button>
      <button onClick={() => calendarRef.current?.today()}>
        Today
      </button>
      <button onClick={() => calendarRef.current?.changeView('dayGridMonth')}>
        Month View
      </button>

      <Calendar
        entries={entries}
        apiRef={calendarRef}
      />
    </>
  );
};

import { Calendar } from 'fluxo-ui';
import type { CalendarPlugin, CalendarViewDefinition } from 'fluxo-ui';

const myPlugin: CalendarPlugin = {
  name: 'my-custom-plugin',
  views: [myCustomView],
  toolbarActions: [
    {
      id: 'export',
      label: 'Export',
      position: 'end',
      onClick: (api) => {
        const entries = api.getEntries();
        console.log('Exporting', entries.length, 'entries');
      },
    },
  ],
  onInit: (api) => console.log('Plugin initialized'),
};

<Calendar
  entries={entries}
  plugins={[myPlugin]}
/>

<Calendar
  entries={entries}
  editable
  onExternalDrop={(info) => {
    console.log('Dropped at', info.date, 'allDay:', info.allDay);
    // Create new entry from the dropped data
  }}
/>

<Calendar
  entries={entries}
  dateBackgrounds={[
    { date: new Date(2026, 3, 8), color: 'rgba(59, 130, 246, 0.1)' },
    { date: new Date(2026, 3, 10), color: 'rgba(239, 68, 68, 0.1)' },
  ]}
  dateRangeBackgrounds={[
    { start: new Date(2026, 3, 5), end: new Date(2026, 3, 7), color: 'rgba(139, 92, 246, 0.08)' },
  ]}
/>

<Calendar
  entries={entries}
  initialView="timeGridWeek"
  showNavigationPicker
  firstDayOfWeek={1}
  nowIndicator
/>

// The picker auto-selects the right mode:
// - Month views → month picker
// - Week views → week picker
// - Day views → day picker

import { Calendar, ToolbarEndRenderProps } from 'fluxo-ui';

<Calendar
  entries={entries}
  initialView="timeGridWeek"
  showNavigationPicker
  renderToolbarEnd={({ viewSwitcher, pluginActions }) => (
    <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
      <button onClick={() => alert('Custom action!')}>+ New Event</button>
      {pluginActions}
      {viewSwitcher}
    </div>
  )}
/>

// The renderToolbarEnd callback receives:
// - viewSwitcher: The view mode dropdown (ReactNode)
// - pluginActions: Plugin toolbar actions for the end slot (ReactNode)
// Compose them in any order alongside your own components.