@rozie-ui/fullcalendar-lit

Idiomatic lit FullCalendar — a cross-framework calendar/scheduler compiled from one Rozie source wrapping FullCalendar. This package is generated; do not edit src/ by hand.

Install

npm i @rozie-ui/fullcalendar-lit

Peer dependencies: the four @fullcalendar/* engine packages (@fullcalendar/core, @fullcalendar/daygrid, @fullcalendar/timegrid, @fullcalendar/interaction, all ^6.1) + lit. Install them alongside this package. FullCalendar v6 auto-injects its own stylesheet — there is no manual CSS import to add.

Also installed: @rozie/runtime-lit — Rozie's small, tree-shaken runtime helper package (controllable state, keyboard navigation, event modifiers, and safe interpolation). It arrives as a regular dependency, so npm pulls it for you. Your bundler keeps only the helpers this component actually uses — typically a few hundred bytes to a few KB, minified and gzipped. What's in it and what it costs.

Usage

import '@rozie-ui/fullcalendar-lit';

// <rozie-full-calendar> is a custom element. Bind `view`/`events` as
// properties and listen for the `event-click` event.
const el = document.querySelector('rozie-full-calendar');
el.view = 'dayGridMonth';
el.events = [{ id: '1', title: 'Kickoff', start: '2026-06-04' }];
el.addEventListener('view-change', (e) => {
  el.view = e.detail;
});
el.addEventListener('event-click', (e) => {
  console.log(e.detail.event, e.detail.view);
});

Props

| Name | Type | Default | Two-way (model) | Required | | --- | --- | --- | :---: | :---: | | events | Array | [] | | | | view | String | "dayGridMonth" | ✓ | | | weekends | Boolean | true | | | | editable | Boolean | true | | | | selectable | Boolean | true | | | | height | Number | 480 | | | | defaultColor | String | "#3b82f6" | | | | locale | String | "en" | | | | firstDay | Number | 0 | | | | slotDuration | String | "00:30:00" | | | | nowIndicator | Boolean | false | | | | headerToolbar | Object | {…} | | | | options | Object | {} | | |

Events

addEventListener name — the Lit target dispatches multi-word event names kebab-cased.

| Event | Description | | --- | --- | | event-click | Fired when a calendar event is clicked. Payload { event: { id, title, start, end }, jsEvent, view }. | | date-click | Fired when an empty date/time cell is clicked. Payload { date, dateStr, allDay, view }. | | event-drop | Fired after an event is dragged to a new date/time. Payload { event: { id, title, start, end }, delta }. | | select | Fired when a date/time range is selected by drag (requires selectable). Payload { start, end, startStr, endStr, allDay }. | | event-resize | Fired after an event is resized by dragging its edge (requires editable). Payload { event: { id, title, start, end }, startDelta, endDelta }. | | dates-set | Fired whenever the visible date range changes (navigation or view switch). Payload { start, end, view } where view is the active view type string. | | event-mouse-enter | Fired when the pointer enters a calendar event. Payload { event: { id, title, start, end }, jsEvent } (mirrors eventClick). | | event-mouse-leave | Fired when the pointer leaves a calendar event. Payload { event: { id, title, start, end }, jsEvent } (mirrors eventMouseEnter). | | unselect | Fired when a previously selected date/time range is cleared. Payload { jsEvent }. | | loading | Fired when the calendar begins or finishes loading events (e.g. from an event source). Payload { isLoading } boolean. | | events-set | Fired after the set of rendered events changes. Payload { events: [{ id, title, start, end }, …] } — the normalized current event set, for persistence/sync consumers. |

Imperative handle

Beyond props/events, the component exposes imperative methods (declared once in the Rozie source via $expose). Grab a handle with the native ref mechanism and call them directly:

// The custom element IS the handle — its exposed methods are public
// element methods.
const el = document.querySelector('rozie-full-calendar');
el.next();
const api = el.getApi();

| Method | Description | | --- | --- | | getApi | Return the underlying FullCalendar Calendar instance for direct API access. | | changeView | Switch the active view — changeView(viewName, dateOrRange?). | | addEvent | Add an event — addEvent(eventInput, source?). | | removeEvent | Remove an event by id — removeEvent(id). | | today | Navigate to today. | | prev | Navigate to the previous date range. | | next | Navigate to the next date range. | | gotoDate | Navigate to a specific date — gotoDate(date). | | getDate | Return the calendar’s current anchor Date (the view model carries only the view type). null before mount. | | getEvents | Return all current events as an EventApi[] (synchronous read; eventsSet is push-only). [] before mount. | | scrollToTime | Scroll a timeGrid view to a time of day — scrollToTime(duration) (e.g. "09:00"). | | updateSize | Force a relayout after the container resized outside FullCalendar’s knowledge (tab reveal, sidebar collapse). | | prevYear | Navigate to the previous year. | | nextYear | Navigate to the next year. | | selectRange | Programmatically select a date/time range — selectRange(dateOrObj, endDate?) (CalendarApi.select). | | clearSelection | Clear the current selection (CalendarApi.unselect). |

Slots

| Slot | Params | | --- | --- | | event | arg | | dayCell | arg | | dayHeader | arg | | slotLabel | arg | | weekNumber | arg | | nowIndicatorContent | arg | | moreLink | arg | | allDayContent | arg | | slotLaneContent | arg | | noEventsContent | arg |