2.0.2 • Published 9h ago

@modelschedules/gantt

Licence

MIT

Version

2.0.2

Deps

Size

50 kB

Vulns

Weekly

Summary Dependency Versions

modelschedules-gantt

A Vue 3 schedule roadmap and Gantt-style timeline component.

Installation

npm install modelschedules-gantt vue

Usage

<script setup lang="ts">
import { ScheduleModel } from 'modelschedules-gantt';
import 'modelschedules-gantt/style.css';
import type { ScheduleModelData } from 'modelschedules-gantt';

const schedules: ScheduleModelData[] = [
  {
    id: 1,
    categoryName: 'Planning',
    parentId: 0,
    name: 'Requirements and discovery',
    description: '',
    startDate: new Date('2026-08-01'),
    endDate: new Date('2026-08-08'),
    complete: 100,
  },
];

function handleTaskClick(schedule: ScheduleModelData) {
  console.log(schedule);
}
</script>

<template>
  <ScheduleModel :schedules="schedules" @task-click="handleTaskClick" />
</template>

When no schedules are provided, the component displays its built-in sample timeline. Styles are imported automatically with the component.

Schedule fields

Each schedule contains:

Field	Type	Description
`id`	`number`	Unique task identifier.
`categoryName`	`string`	Top-level category name.
`parentId`	`number`	Optional parent task identifier.
`name`	`string`	Task name.
`description`	`string`	Task description.
`startDate`	`Date`	Task start date.
`endDate`	`Date`	Task end date.
`complete`	`number`	Completion percentage from 0 to 100.

Development

npm run type-check
npm run build
npm run build:ci

The production build emits ESM, UMD, CSS, and TypeScript declaration files in dist/.