@timelinekit/react

React components for TimelineKit — high-performance, canvas-rendered scheduling components.

For a full feature overview, themes, localization, and export options, see the @timelinekit/core README.

Installation

npm install @timelinekit/react @timelinekit/core

Requires React 18 or later.

Components

| Component | Import | Ref Type | Styles Import | |-----------|--------|----------|---------------| | Gantt Chart | GanttChart | GanttChartRef | @timelinekit/core/styles | | Resource Scheduler | ResourceScheduler | ResourceSchedulerRef | @timelinekit/core/styles | | Event Calendar | EventCalendar | EventCalendarRef | @timelinekit/core/styles |

All types from @timelinekit/core are re-exported from this package for convenience.

Quick Start

Gantt Chart

import { useRef, useEffect } from 'react';
import { GanttChart, GanttChartRef } from '@timelinekit/react';
import '@timelinekit/core/styles';

const data = {
  tasks: [
    { id: '1', name: 'Design', startTime: '2027-01-05', endTime: '2027-01-09', type: 'task', progress: 100 },
    { id: '2', name: 'Development', startTime: '2027-01-12', endTime: '2027-01-23', type: 'task' },
  ],
  links: [
    { id: 'l1', from: '1', to: '2', type: 'finishToStart' },
  ],
};

function App() {
  const ref = useRef<GanttChartRef>(null);

  useEffect(() => {
    ref.current!.load(JSON.stringify(data));
    ref.current!.zoomToFit();
  }, []);

  return <GanttChart ref={ref} style={{ height: '600px' }} />;
}

Resource Scheduler

import { useRef, useEffect } from 'react';
import { ResourceScheduler, ResourceSchedulerRef, SchedulerResource, SchedulerEvent } from '@timelinekit/react';
import '@timelinekit/core/styles';

function App() {
  const ref = useRef<ResourceSchedulerRef>(null);

  useEffect(() => {
    const scheduler = ref.current!;
    scheduler.data.addResource(new SchedulerResource('1', 'Room A'));
    scheduler.data.addEvent(new SchedulerEvent('e1', '1', 'Meeting', new Date('2027-01-05T09:00'), new Date('2027-01-05T10:30')));
  }, []);

  return <ResourceScheduler ref={ref} style={{ height: '600px' }} />;
}

Event Calendar

import { useRef, useEffect } from 'react';
import { EventCalendar, EventCalendarRef } from '@timelinekit/react';
import '@timelinekit/core/styles';

function App() {
  const ref = useRef<EventCalendarRef>(null);

  useEffect(() => {
    const calendar = ref.current!;
    calendar.load(JSON.stringify({
      items: [
        { id: '1', name: 'Team Standup', startTime: '2027-01-05T09:00', endTime: '2027-01-05T09:30', type: 'Meeting' },
      ],
    }));
  }, []);

  return <EventCalendar ref={ref} style={{ height: '600px' }} />;
}

API Access

Each component exposes its API through a ref:

const ref = useRef<GanttChartRef>(null);

ref.current.load(JSON.stringify(data));
ref.current.zoomIn();
ref.current.undo();
ref.current.exportToImage();

Styling

Import the combined stylesheet for all components:

import '@timelinekit/core/styles';

To import only a specific component, use @timelinekit/core/styles/gc, styles/rs, or styles/ec. SCSS sources are available via @timelinekit/core/styles/scss.

Licensing

TimelineKit is free to use with a watermark. Purchase a license to remove it:

import { setLicense } from '@timelinekit/react';

setLicense('your-license-key');

See pricing for details.

Resources

• Documentation
• Live Demos
• Examples
• Support

License

See LICENSE for details.