FullCalendar — usage examples

FullCalendar ships as six pre-compiled, per-framework packages from a single .rozie source — install only the one for your framework (no Rozie toolchain, no build-time compile step). Each carries its engine + framework peers as peer dependencies, so you control their versions. The snippets below are the same idiomatic consumption code shown in each package's README; switch the tab to your framework.

Usage

tsx

import { useState } from 'react';
import { FullCalendar } from '@rozie-ui/fullcalendar-react';

export function Demo() {
  const [view, setView] = useState('dayGridMonth');
  const [events] = useState([{ id: '1', title: 'Kickoff', start: '2026-06-04' }]);
  return (
    <FullCalendar
      view={view}
      onViewChange={setView}
      events={events}
      onEventClick={(e) => console.log(e.event, e.view)}
    />
  );
}

vue

<script setup lang="ts">
import { ref } from 'vue';
import FullCalendar from '@rozie-ui/fullcalendar-vue';

const view = ref('dayGridMonth');
const events = ref([{ id: '1', title: 'Kickoff', start: '2026-06-04' }]);
</script>

<template>
  <FullCalendar v-model:view="view" :events="events" @eventClick="(e) => console.log(e.event, e.view)" />
</template>

svelte

<script lang="ts">
  import FullCalendar from '@rozie-ui/fullcalendar-svelte';

  let view = $state('dayGridMonth');
  let events = $state([{ id: '1', title: 'Kickoff', start: '2026-06-04' }]);
</script>

<FullCalendar bind:view {events} oneventClick={(e) => console.log(e.event, e.view)} />

import { Component } from '@angular/core';
import { FullCalendar } from '@rozie-ui/fullcalendar-angular';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [FullCalendar],
  template: `
    <FullCalendar [(view)]="view" [events]="events" (eventClick)="onEventClick($event)" />
  `,
})
export class DemoComponent {
  view = 'dayGridMonth';
  events = [{ id: '1', title: 'Kickoff', start: '2026-06-04' }];
  onEventClick(e: { event: unknown; view: unknown }) {
    console.log(e.event, e.view);
  }
}

tsx

import { createSignal } from 'solid-js';
import { FullCalendar } from '@rozie-ui/fullcalendar-solid';

export function Demo() {
  const [view, setView] = createSignal('dayGridMonth');
  const [events] = createSignal([{ id: '1', title: 'Kickoff', start: '2026-06-04' }]);
  return (
    <FullCalendar
      view={view()}
      onViewChange={setView}
      events={events()}
      onEventClick={(e) => console.log(e.event, e.view)}
    />
  );
}

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);
});

Imperative handle

Beyond props and events, FullCalendar exposes imperative methods (declared once in the .rozie source via $expose). Grab a handle through your framework's native ref mechanism and call them directly:

tsx

import { useRef } from 'react';
import { FullCalendar, type FullCalendarHandle } from '@rozie-ui/fullcalendar-react';

const cal = useRef<FullCalendarHandle>(null);
// <FullCalendar ref={cal} ... />
cal.current?.next();
const api = cal.current?.getApi();

vue

<script setup>
import { ref } from 'vue';
const cal = ref();          // template ref
</script>

<template>
  <FullCalendar ref="cal" />
  <button @click="cal.next()">Next</button>
</template>

svelte

<script>
  let cal;                  // component instance via bind:this
</script>

<FullCalendar bind:this={cal} />
<button onclick={() => cal.next()}>Next</button>

@Component({ /* ... */ })
export class DemoComponent {
  @ViewChild(FullCalendar) cal!: FullCalendar;  // or the viewChild() signal
  advance() { this.cal.next(); }
  api() { return this.cal.getApi(); }
}

tsx

import { FullCalendar, type FullCalendarHandle } from '@rozie-ui/fullcalendar-solid';

let handle: FullCalendarHandle | undefined;
// The ref callback receives the HANDLE object (not the DOM node).
<FullCalendar ref={(h) => (handle = h)} />;
handle?.next();
const api = handle?.getApi();

// 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();

FullCalendar — usage examples ​

Usage ​

Imperative handle ​

See also ​

FullCalendar — usage examples

Usage

Imperative handle

See also