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 多模态文档编辑器中, 作为高级文档组件, 来实现更复杂的业务场景.
多模态文档编辑器地址: http://flowmix.turntip.cn/docx
最新进展我会定期同步在flowmix视界公众号中, 大家感兴趣可以关注一下:
如果大家有好的建议也欢迎随时交流反馈~
往期精彩：
安利一款支持多人协同的多模态文档编辑器
又做了一款新产品!多模态文档Saas平台
