FF Scheduler

A lightweight, framework-agnostic scheduler/timeline UI component built with TypeScript.

Features

• 🎯 Framework-agnostic - works with any JavaScript framework or vanilla JS
• 📅 Flexible timeline view with customizable hours
• 🎨 Customizable event styling and colors
• 📱 Responsive design
• 🎯 Drag and drop support
• 📊 Resource grouping
• 🕒 12/24 hour time format support
• 🎨 Customizable styling

Installation

npm install ff-scheduler

Usage

import { Scheduler } from 'ff-scheduler';
import 'ff-scheduler/styles.css';

// Create a new scheduler instance
const scheduler = new Scheduler({
  container: document.getElementById('scheduler'),
  hours: [8, 9, 10, 11, 12, 13, 14, 15, 16, 17], // 8 AM to 5 PM
  events: [
    {
      id: '1',
      title: 'Meeting',
      start: new Date('2024-03-20T10:00:00'),
      end: new Date('2024-03-20T11:00:00'),
      color: '#ef4444'
    }
  ],
  resourceGroups: [
    {
      name: 'Team A',
      resources: ['John', 'Jane', 'Bob']
    }
  ],
  timeFormat: '12h', // or '24h'
  onEventSelect: (eventId) => {
    console.log('Selected event:', eventId);
  }
});

API

Scheduler Options

| Option | Type | Description | |--------|------|-------------| | container | HTMLElement | The container element for the scheduler | | hours | number[] | Array of hours to display (e.g., [8,9,10,11,12,13,14,15,16,17]) | | events | SchedulerEvent[] | Array of events to display | | resourceGroups | ResourceGroup[] | Optional array of resource groups | | timeFormat | '12h' | '24h' | Time format to use (default: '12h') | | onEventSelect | (eventId: string) => void | Callback when an event is selected | | onEventDrag | (eventId: string, newRowIndex: number) => void | Callback when an event is dragged |

SchedulerEvent

interface SchedulerEvent {
  id: string;
  title: string;
  start: Date;
  end: Date;
  color?: string;
  segments?: {
    start: Date;
    end: Date;
    title: string;
    color?: string;
    fromLabel?: string;
    toLabel?: string;
  }[];
}

ResourceGroup

interface ResourceGroup {
  name: string;
  resources: string[];
}

Styling

The scheduler comes with default styles that can be customized using CSS variables:

:root {
  --scheduler-cell-width: 80px;
  --scheduler-resource-cell-width: 120px;
  --scheduler-header-height: 40px;
  --scheduler-row-height: 60px;
  --scheduler-border-color: #e5e7eb;
  --scheduler-text-color: #1f2937;
  --scheduler-background-color: #ffffff;
}

License

ISC