nabs-ui-event-calendar

Reusable event calendar control for the Nabs UI library.

Usage

import { EventCalendar } from "@net-advantage/nabs-ui-event-calendar";

const events = [
  {
    id: "kickoff",
    title: "Launch kickoff",
    start: "2026-08-14T09:00:00",
    end: "2026-08-14T11:00:00",
    content: <strong>Room Atlas</strong>,
  },
  {
    id: "festival",
    title: "City arts week",
    start: "2026-08-16",
    end: "2026-08-21",
    allDay: true,
  },
];

export function Example() {
  return (
    <EventCalendar
      events={events}
      defaultView="week"
      defaultAnchorDate="2026-08-14"
      onEventClick={({ event }) => console.log(event.id)}
    />
  );
}

Props

• events accepts overlapping and spanning events.
• view and anchorDate support controlled usage.
• eventTemplate customizes rich event rendering, including media.
• Built-in controls use Toolbar, DropdownList, and DatePicker.