Gantt Schedule Timeline Calendar 项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01022/article/details/142838043

Gantt Schedule Timeline Calendar 项目教程

gantt-schedule-timeline-calendar Gantt Gantt Gantt Timeline Schedule Calendar [ javascript gantt, js gantt, projects gantt, timeline, scheduler, gantt timeline, reservation timeline, react gantt, angular gantt, vue gantt, svelte gantt, booking manager ] 项目地址: https://gitcode.com/gh_mirrors/ga/gantt-schedule-timeline-calendar

1. 项目介绍

gantt-schedule-timeline-calendar 是一个多功能的时间管理组件，集成了甘特图、时间线、日历等功能。它支持多种前端框架，如 React、Angular、Vue 和 Svelte，适用于各种项目管理、日程安排、资源管理和多媒体编辑等场景。

主要特性

弹性配置：几乎所有内容都可以通过配置、状态或插件进行修改，无需编译。
高性能：即使在处理大数据集时也能保持高性能。
多项目支持：支持在同一行中显示多个项目，适用于预订、资源管理等应用。
树形结构：支持可折叠/展开的树形结构。
移动友好：设计为移动设备友好。
插件支持：支持自定义插件扩展功能。

2. 项目快速启动

安装

你可以通过 npm 或直接使用 CDN 来安装 gantt-schedule-timeline-calendar。

使用 npm 安装

npm install gantt-schedule-timeline-calendar

使用 CDN

<script src="https://cdn.jsdelivr.net/npm/gantt-schedule-timeline-calendar/dist/gstc.wasm.umd.min.js"></script>

快速启动示例

以下是一个简单的示例，展示如何在 HTML 文件中使用 gantt-schedule-timeline-calendar。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gantt Schedule Timeline Calendar 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/gantt-schedule-timeline-calendar/dist/gstc.wasm.umd.min.js"></script>
</head>
<body>
    <div id="gstc"></div>
    <script>
        const gstc = new GSTC({
            element: document.getElementById('gstc'),
            state: GSTC.api.stateFromConfig({
                list: {
                    rows: {
                        '1': { id: '1', label: 'Task 1' },
                        '2': { id: '2', label: 'Task 2' }
                    }
                },
                chart: {
                    items: {
                        '1': { id: '1', rowId: '1', start: GSTC.api.date('2023-10-01'), end: GSTC.api.date('2023-10-05') },
                        '2': { id: '2', rowId: '2', start: GSTC.api.date('2023-10-03'), end: GSTC.api.date('2023-10-07') }
                    }
                }
            })
        });
    </script>
</body>
</html>