@timelinekit/vue

Vue 3 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/vue @timelinekit/core

Requires Vue 3.3 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

<script setup lang="ts">
import { ref } from 'vue';
import { GanttChart, type GanttChartRef } from '@timelinekit/vue';
import '@timelinekit/core/styles';

const ganttRef = ref<GanttChartRef>();

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 handleReady() {
  ganttRef.value!.load(JSON.stringify(data));
  ganttRef.value!.zoomToFit();
}
</script>

<template>
  <GanttChart ref="ganttRef" @ready="handleReady" style="height: 600px" />
</template>

Resource Scheduler

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ResourceScheduler, type ResourceSchedulerRef, SchedulerResource, SchedulerEvent } from '@timelinekit/vue';
import '@timelinekit/core/styles';

const schedulerRef = ref<ResourceSchedulerRef>();

onMounted(() => {
  const scheduler = schedulerRef.value!;
  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')));
});
</script>

<template>
  <ResourceScheduler ref="schedulerRef" style="height: 600px" />
</template>

Event Calendar

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { EventCalendar, type EventCalendarRef } from '@timelinekit/vue';
import '@timelinekit/core/styles';

const calendarRef = ref<EventCalendarRef>();

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

<template>
  <EventCalendar ref="calendarRef" style="height: 600px" />
</template>

API Access

Each component exposes its API through a template ref:

<script setup lang="ts">
import { ref } from 'vue';
import { GanttChart, type GanttChartRef } from '@timelinekit/vue';

const ganttRef = ref<GanttChartRef>();

function handleReady() {
  ganttRef.value!.load(JSON.stringify(data));
  ganttRef.value!.zoomIn();
  ganttRef.value!.undo();
  ganttRef.value!.exportToImage();
}
</script>

<template>
  <GanttChart ref="ganttRef" @ready="handleReady" />
</template>

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/vue';

setLicense('your-license-key');

See pricing for details.

Resources

• Documentation
• Live Demos
• Examples
• Support

License

See LICENSE for details.