18.8k star, 一款支持各种甘特图的开源日历组件

原创于 2024-12-18 10:59:41 发布 · 849 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#甘特图

hi, 大家好, 我是徐小夕.

最近在研究文档引擎(flowmix/docx)的过程中发现一款非常有价值的开源组件:

在 github 上有18.8k star, 原生js实现, 可以轻松集成到 vue 和 react 项目中, 它就是开源日历神器——FullCalendar.

虽然 FullCalendar 主要是一个日历库，但它也支持甘特图视图，并且功能强大。支持多种视图（如月视图、周视图、日视图等），事件管理（添加、编辑、删除和拖放事件），时间轴视图等，适用于需要日历和甘特图功能相结合的 Web 应用程序，例如项目计划与日程安排相关的应用.

同时它支持了开箱即用的国际化功能, 并且支持主题定制, 非常适合做知识库项目管理类的产品.

使用方式

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';

let calendarEl = document.getElementById('calendar');
let calendar = new Calendar(calendarEl, {
  plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ],
  initialView: 'dayGridMonth',
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,timeGridWeek,listWeek'
  }
});
calendar.render();

上面是原生js的实现方式, 官方团队也实现了支持Vue, React, Angular的版本, 感兴趣的可以在gihtub上参考使用一下:

github地址: https://github.com/fullcalendar/fullcalendar

因为我们最近也在开发文档项目管理类产品——橙子轻文档, 所以这里和大家分享一下这个库, 后续我们可能会把 FullCalendar 集成到 flowmix/docx 多模态文档编辑器中, 作为高级文档组件, 来实现更复杂的业务场景.