Features

Multi-lane Layout

When events overlap in time, the scheduler automatically stacks them into multiple lanes within the same resource row. The row height adjusts dynamically.

// Check how many lanes a resource needs
const laneCount = scheduler.data.getLaneCount('r1');

// Get which lane an event is placed in
const lane = scheduler.data.getEventLane(event); // 0-based

Conflict Detection

Detect overlapping events for a resource — useful for validation or visual conflict indicators.

// Check if an event has any conflicts
const hasConflict = scheduler.data.hasConflict(event);

// Get all overlapping events in a time range
const overlaps = scheduler.data.getOverlappingEvents(
  'r1',                          // resourceId
  new Date('2027-01-10T09:00'),  // startTime
  new Date('2027-01-10T17:00'),  // endTime
  'e5'                           // excludeEventId (optional)
);

Export

Export the scheduler as an image, PDF, CSV, or Excel file. See also the Export guide for detailed options.

// Export as PNG image
const imageBlob = await scheduler.exportToImage();

// Export as PDF (requires jspdf)
const pdfBlob = await scheduler.exportToPdf();

// Export as CSV
const csv = scheduler.exportToCsv({
  delimiter: ',',
  includeHeaders: true,
  includeResources: false,
});

// Export as Excel (requires exceljs)
const excelBlob = await scheduler.exportToExcel({
  eventsSheetName: 'Schedule',
  includeResourcesSheet: true,
  includeFormatting: true,
});

Serialization

Save and load the complete scheduler state as JSON. Includes resources, events, project timeline, markers, and frozen row settings.

// Save state
const json = scheduler.save();
localStorage.setItem('scheduler-state', json);

// Load state
const saved = localStorage.getItem('scheduler-state');
scheduler.load(saved);

JSON Structure

{
  "resources": [
    { "id": "r1", "name": "Alice", "type": "person", "color": 0, "avatarUrl": "..." }
  ],
  "events": [
    { "id": "e1", "resourceId": "r1", "name": "Task", "startTime": "...", "endTime": "..." }
  ],
  "projectTimeline": { "startDate": "...", "endDate": "..." },
  "showTodayLine": true,
  "frozenResourceIds": ["r1"],
  "markers": [{ "date": "...", "label": "...", "color": "...", "lineStyle": "..." }]
}