@modelschedules/timeline

#Install

pnpm add @modelschedules/timeline

#Quick start

1. Extend Your Schedule From Pre-defined Models

import { ParentScheduleModel, ScheduleListModel, ScheduleModel } from '@modelschedules/timeline';

class MyScheduleItem extends ScheduleModel{
    /// ... fields
}

2. Import table component

<script setup lang="ts">
import { ScheduleTimeline } from '@modelschedules/timeline'

const schedules = [
  {
    Id: 1,
    Name: 'Development',
    Description: 'Development Description',
    Schedules: [
      {
        Id: 11,
        Name: 'Planning',
        Description: 'Planning phase',
        StartDate: new Date('2026-01-05'),
        EndDate: new Date('2026-01-20'),
      },
      {
        Id: 12,
        Name: 'Implementation',
        Description: 'Implementation phase',
        StartDate: new Date('2026-01-21'),
        EndDate: new Date('2026-02-10'),
      },
    ],
  },
]

function onOpenScheduleItem(item: any) {
  console.log('Open schedule item:', item)
}
</script>

<template>
  <ScheduleTimeline
    title="Delivery Roadmap"
    :schedules="schedules"
    @openScheduleItem="onOpenScheduleItem"
  />
</template>

Documentation

ScheduleTimeline component is project managment chart for visualizing Your schedule items. Pre defined Model are ScheduleListModel used to extend Your custom models. Title parameter is name of schedule, with scheduleTheme options you can change look of your components. Main event is openScheduleItem in corelation with right tool.

License MIT