FullScheduler

FullScheduler is a powerful, lightweight, and framework‑agnostic event scheduler and calendar component.
It provides a unified Custom Element core that can be used seamlessly across Vue, Angular, and Vanilla JS/TS applications.

📖 Full documentation, guides, and live demos are available at
👉 https://fullscheduler.stackfalcon.com/

🚀 Key Features

• Custom Element Core — one unified web component for all frameworks.
• Cross‑framework support
  • ✅ Vue (fullscheduler)
  • ✅ Angular (fullscheduler-ng)
  • ✅ Vanilla JS/TS (fullscheduler-js)
• Rich Interactions — drag, resize, ghost overlays, and real‑time updates.
• Lightweight & Reactive — minimal DOM overhead with fast reactivity.
• Customizable UI — colors, time ranges, overlays, and tooltips.
• Fully TypeScript‑ready — generic types for event data and API methods.

📦 Installation

Vue

npm install fullscheduler

💡 Basic Usage

Vue (SFC, Vue 3)

<script setup lang="ts">
import FullScheduler from 'fullscheduler';
import type { FullSchedulerApiInitOptions, FullSchedulerEvent } from 'fullscheduler';

type DemoData = { /** ctx **/ };


const calendarOptions: FullSchedulerApiInitOptions<DemoData> = {
  height: 560,
  startDate: new Date(),
  endDate: new Date(new Date().setDate(new Date().getDate() + 5)),
  startHour: 8,
  endHour: 18,
  draggableEvents: true,
  resizableEvents: true,
  showCursorTime: true,
  throwErrors: false,
  threshold: 0,
  onFullSchedulerApiReady: (api) => {
    const seed: FullSchedulerEvent<DemoData>[] = [
      { label: 'Design review', start: at(9),  end: at(11), data: { id: '1', color: '#93c5fd' } },
      { label: 'Client call',   start: at(12), end: at(13), data: { id: '2', color: '#86efac' } },
      { label: 'Dev pair',      start: at(14), end: at(16), data: { id: '3', color: '#fda4af' } },
    ];
    api.setEvents(seed);
  },
  // and much more
};
</script>

<template>
  <FullScheduler :full-scheduler-options="calendarOptions" />
</template>

🧭 Documentation & Examples

Visit the official website for:

• API reference
• Framework‑specific setup guides
• Live playground and demos
• Migration notes and changelogs

👉 https://fullscheduler.stackfalcon.com/

🧩 License

MIT © StackFalcon Team