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

Vanilla JS / TS

npm install fullscheduler-js

💡 Basic Usage

Vanilla JS

import { createFullScheduler, type FullSchedulerApiInitOptions } from 'fullscheduler-js';

const el = document.getElementById('app')!;

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

createFullScheduler({ target: el, props: { fullSchedulerOptions: calendarOptions } });

🧭 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