1. 首页
  2. SEO百科
  3. Web前端

react-timeline-gantt菜鸟教程网_用于显示和管理日历甘特图的react组件

react-timeline-gantt菜鸟教程网

GitHub:https://github.com/guiqui/react-timeline-gantt

react-timeline-gantt菜鸟教程网_用于显示和管理日历甘特图的react组件

简介描述:用于显示和管理日历甘特图的react组件

React-timeline-gantt是一个用于显示和管理日历甘特图的组件。它使用虚拟渲染来有效地做出反应。

该组件能够:

  • 可处理10万条记录。
  • 无限日历滚动
  • 三种缩放级别:日,周,月
  • 完全可定制。
  • 支持所有CRUD操作。
  • 任务和链接的创建。
  • 支持分页。
  • 可以轻松地与Redux集成

安装


1
npm install react-gantt-timeline

该组件具有以下依赖关系:moment,react-sizeme

一旦安装了组件及其所有依赖项,首先要做的就是创建时间线组件使用的数据。时间线具有两个数据提供程序数据链接

数据:是一个对象数组,其中包含要显示的任务。作为数组一部分的每个对象都必须具有以下强制字段

属性说明
ID字符串/号码类的唯一标识符
开始日期任务的开始日期
结束日期任务的结束日期
名称要显示的任务名称
颜色(可选)要显示的任务的颜色

数据定义的示例:


1
2
let data=[ {id:1,start:new Date(), end:new Date()+1 ,name:'Demo Task 1'},
           {id:2,start:new Date(), end:new Date()+1 ,name:'Demo Task 2'}]

海计划公众号