gantt-schedule-timeline-calendar

<h1 align="center">甘特图-日程表-时间线-日历</h1> <h2 align="center">甘特图、日程表、时间线和日历组件一应俱全！</h2> <p align="center"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/9424457b-665a-41c3-b6ca-9214b7c5ab4c.jpg" alt="甘特图-日程表-时间线-日历"> </p> <h3>甘特图-日程表-时间线-日历是一个多功能组件，可用于不同场景。</h3> 关键词：[ 甘特图, JavaScript甘特图, TypeScript甘特图, 项目管理器, JS甘特图, JS调度器, JS时间线, JavaScript时间线, JavaScript日程表, JS调度器, JavaScript日历 ] <br/><br/><br/> <p align="center"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/ffa083a2-2438-4e27-bd99-480238c84eff.svg"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/9f4e8684-6433-4a47-8f09-fb0296e1e667.svg"> <img src="https://app.codacy.com/project/badge/Grade/732e0ef156344594b48584af97ba1e4a"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/55318211-ab74-4045-975c-311e10c8b93f.svg"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/84e3191b-917d-4364-b398-95fbc280e788.svg"> <img src="https://img.shields.io/endpoint?url=https://dashboard.cypress.io/badge/simple/qdqmtw/master&style=flat&logo=cypress"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/1576a7f1-53c2-44c2-9c41-ce0edcd14156.svg?branch=master"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/62cbd8b9-2a29-4a29-aea4-78ea9c3719fc.svg"> <!--<img src="https://img.badgesize.io/neuronetio/gantt-schedule-timeline-calendar/master/dist/gstc.esm.min.js?compression=gzip">--> </p> <br> <br /> <h3 align="center">请记得给我们<a href="https://github.com/neuronetio/gantt-schedule-timeline-calendar">点个星星 :star:</a></h3> <br /> <h2 align="center">特性</h2>

• 弹性设计 - 您可以通过配置、状态或插件更改几乎所有内容，从DOM树到逻辑（无需编译，无需修改原始代码）
• 超快速！即使处理大型数据集
• 一行多个项目 - 适用于各种应用，如预订、预约、资源管理、多媒体编辑等
• 树状结构 - 可折叠/展开的分组
• 可移动/可调整大小的项目，能够配置当前可移动的项目及其移动方式
• 安全的HTML模板
• 调整大小/移动时可对齐到指定时间
• 支持模板和插槽，轻松更改每个组件的HTML内容
• 可放置HTML内容的背景网格
• 可选择的单元格和项目，可选择当前可选择的内容
• 逐步时间缩放，精确到秒
• 可实时调整列表列宽
• 可排序和搜索的列表列
• 基于BEM的CSS规则（易于更改外观）
• 可轻松添加第三方库
• 高度可配置
• 移动设备友好
• 支持夏令时（DST）
• 支持插件
• 视觉吸引力强
• 使用TypeScript编写
• 离线许可密钥（购买后）

<p> 您可以在<strong>React</strong>、<strong>Vue</strong>、<strong>Angular</strong>、<strong>Svelte</strong>或任何其他项目中使用它。 </p> <p> 您可以将其用作预订系统的<strong>日程表</strong>。您可以用它来组织<strong>活动</strong>。您可以将其用作<strong>甘特图</strong>。您可以将其用作各种用途的<strong>日历</strong>。 您甚至可以将其用作<strong>多媒体时间线编辑器</strong>！ </p> <p> <strong>甘特图-日程表-时间线-日历</strong>具有很强的扩展性和弹性。您可以创建自己的插件或通过多种方式修改配置以实现目标。 您几乎可以控制所有内容。您可以更改HTML结构，为每个HTML元素设置样式，甚至可以在不进行任何编译的情况下覆盖原始组件！ </p> <h2 align="center">示例</h2>

<a href="https://gantt-schedule-timeline-calendar.neuronet.io/examples" target="_blank">在线示例</a>

您也可以查看示例文件夹。 要在本地运行示例，请克隆此存储库并在根文件夹中运行npm run examples。

git clone https://github.com/neuronetio/gantt-schedule-timeline-calendar.git
cd gantt-schedule-timeline-calendar
npm i
npm run examples

<h2 align="center">REACT、NEXTJS、ANGULAR、SVELTE和VUE示例</h2>

• React甘特图-日程表-时间线-日历使用示例
• NextJS/React甘特图-日程表-时间线-日历使用示例
• Angular甘特图-日程表-时间线-日历使用示例
• Vue甘特图-日程表-时间线-日历使用示例
• Vue3组合式API与Vite甘特图-日程表-时间线-日历示例
• Svelte甘特图-日程表-时间线-日历使用示例

<h2 align="center">截图</h2> <p align="center"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/99a1acad-3507-4915-9a0f-9317f28c8895.png" alt="甘特图-日程表-时间线-日历项目类型"> <br /> <img src="https://yellow-cdn.veclightyear.com/835a84d5/47e8d09f-a2ce-4668-a1c9-f8db917e76d3.png" alt="甘特图-日程表-时间线-日历项目类型"> <br /> <img src="https://yellow-cdn.veclightyear.com/835a84d5/582a7805-f9c0-427d-8e0f-70d58dac8525.png" alt="甘特图-日程表-时间线-日历项目类型"> <br /> <img src="https://yellow-cdn.veclightyear.com/835a84d5/514357fa-41ec-40f0-bb21-86bbcf372ec6.gif" alt="甘特图-日程表-时间线-日历选择单元格"> <br /> <img src="https://yellow-cdn.veclightyear.com/835a84d5/67e3f75a-3904-403a-afb4-4781e4e9d660.gif" alt="甘特图-日程表-时间线-日历链接项目"> <br /> <img src="https://yellow-cdn.veclightyear.com/835a84d5/7abefb9d-e0d0-43fa-8352-a857fe5b6e73.gif" alt="甘特图-日程表-时间线-日历选择项目"> <br /> <img src="https://yellow-cdn.veclightyear.com/835a84d5/c4125166-2ace-44be-8061-5c80921df1aa.gif" alt="甘特图-日程表-时间线-日历链接项目2"> </p> <hr /> <h2 align="center">安装</h2>

npm i gantt-schedule-timeline-calendar

或

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

<h2 align="center">文档</h2>

文档可在此处找到

<h2 align="center">需要帮助？</h2>

请联系我们 neuronet.io@gmail.com

<h2 align="center">许可证</h2>

NEURONET 免费/试用许可条款

您可以在此处生成免费或试用许可密钥。 如果您需要完整的商业许可证，请访问定价页面。