组件分享之前端组件——甘特图时间表时间线日历组件
2024-05-15 20:31:47
组件分享之前端组件——甘特图时间表时间线日历组件
背景
近期正在探索前端、后端、系统端各类常用组件与工具，对其一些常见的组件进行再次整理一下，形成标准化组件专题，后续该专题将包含各类语言中的一些常用组件。欢迎大家进行持续关注。
组件基本信息
- 组件：甘特图时间表时间线日历
- 开源协议： MIT License
- 使用说明：https://gantt-schedule-timeline-calendar.neuronet.io/
内容
本次分享的组件是甘特图时间表时间线日历组件
Gantt-elastic -Javascript 甘特图(可编辑，响应式)
vue、jquery、vanilla js等框架的Javascript甘特图
其后续延伸的组件 gantt-schedule-timeline-calendar是收费版本的，可以根据实际需要进行选用。
当前组件样子如下：
image.png
测试案例如下：
<!DOCTYPE html>
<html charset="utf-8"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /><title>GanttElastic editor demo</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/dayjs"></script><script src="https://unpkg.com/gantt-elastic/dist/GanttElastic.umd.js"></script><script src="https://unpkg.com/gantt-elastic-header/dist/Header.umd.js"></script></head><body><div style="width:100%;height:100%"><div id="app" v-if="!destroy"><gantt-elastic :tasks="tasks" :options="options" :dynamic-style="dynamicStyle"><gantt-header slot="header"></gantt-header><gantt-footer slot="footer"></gantt-footer></gantt-elastic></div></div><script>// just helper to get current datesfunction getDate(hours) {const currentDate = new Date();const currentYear = currentDate.getFullYear();const currentMonth = currentDate.getMonth();const currentDay = currentDate.getDate();const timeStamp = new Date(currentYear, currentMonth, currentDay, 0, 0, 0).getTime();return new Date(timeStamp + hours * 60 * 60 * 1000).getTime();}let tasks = [{id: 1,label: 'Make some noise',user:'<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>',start: getDate(-24 * 5),duration: 15 * 24 * 60 * 60 * 1000,progress: 85,type: 'project',//collapsed: true,},{id: 2,label: 'With great power comes great responsibility',user:'<a href="https://www.google.com/search?q=Peter+Parker" target="_blank" style="color:#0077c0;">Peter Parker</a>',parentId: 1,start: getDate(-24 * 4),duration: 4 * 24 * 60 * 60 * 1000,progress: 50,type: 'milestone',collapsed: true,style: {base: {fill: '#1EBC61',stroke: '#0EAC51',},/*'tree-row-bar': {fill: '#1EBC61',stroke: '#0EAC51'},'tree-row-bar-polygon': {stroke: '#0EAC51'}*/},},{id: 3,label: 'Courage is being scared to death, but saddling up anyway.',user:'<a href="https://www.google.com/search?q=John+Wayne" target="_blank" style="color:#0077c0;">John Wayne</a>',parentId: 2,start: getDate(-24 * 3),duration: 2 * 24 * 60 * 60 * 1000,progress: 100,type: 'task',},{id: 4,label: 'Put that toy AWAY!',user:'<a href="https://www.google.com/search?q=Clark+Kent" target="_blank" style="color:#0077c0;">Clark Kent</a>',start: getDate(-24 * 2),duration: 2 * 24 * 60 * 60 * 1000,progress: 50,type: 'task',dependentOn: [3],},];let options = {maxRows: 100,maxHeight: 300,title: {label: 'Your project title as html (link or whatever...)',html: false,},row: {height: 24,},calendar: {hour: {display: false,},},chart: {progress: {bar: false,},expander: {display: true,},},taskList: {expander: {straight: false,},columns: [{id: 1,label: 'ID',value: 'id',width: 40,},{id: 2,label: 'Description',value: 'label',width: 200,expander: true,html: true,events: {click({ data, column }) {alert('description clicked!\n' + data.label);},},},{id: 3,label: 'Assigned to',value: 'user',width: 130,html: true,},{id: 3,label: 'Start',value: (task) => dayjs(task.start).format('YYYY-MM-DD'),width: 78,},{id: 4,label: 'Type',value: 'type',width: 68,},{id: 5,label: '%',value: 'progress',width: 35,style: {'task-list-header-label': {'text-align': 'center',width: '100%',},'task-list-item-value-container': {'text-align': 'center',width: '100%',},},},],},/*locale:{name: 'pl', // name Stringweekdays: 'Poniedziałek_Wtorek_Środa_Czwartek_Piątek_Sobota_Niedziela'.split('_'), // weekdays ArrayweekdaysShort: 'Pon_Wto_Śro_Czw_Pią_Sob_Nie'.split('_'), // OPTIONAL, short weekdays Array, use first three letters if not providedweekdaysMin: 'Pn_Wt_Śr_Cz_Pt_So_Ni'.split('_'), // OPTIONAL, min weekdays Array, use first two letters if not providedmonths: 'Styczeń_Luty_Marzec_Kwiecień_Maj_Czerwiec_Lipiec_Sierpień_Wrzesień_Październik_Listopad_Grudzień'.split('_'), // months ArraymonthsShort: 'Sty_Lut_Mar_Kwi_Maj_Cze_Lip_Sie_Wrz_Paź_Lis_Gru'.split('_'), // OPTIONAL, short months Array, use first three letters if not providedordinal: n => `${n}`, // ordinal Function (number) => return number + outputrelativeTime: { // relative time format strings, keep %s %d as the samefuture: 'za %s', // e.g. in 2 hours, %s been replaced with 2hourspast: '%s temu',s: 'kilka sekund',m: 'minutę',mm: '%d minut',h: 'godzinę',hh: '%d godzin', // e.g. 2 hours, %d been replaced with 2d: 'dzień',dd: '%d dni',M: 'miesiąc',MM: '%d miesięcy',y: 'rok',yy: '%d lat'}}*/};// create instanceconst app = new Vue({components: {'gantt-header': Header,'gantt-elastic': GanttElastic,'gantt-footer': {template: `<span>this is a footer</span>`,},},data: {tasks: tasks.map((task) => Object.assign({}, task)),options,dynamicStyle: {'task-list-header-label': {'font-weight': 'bold',},},destroy: false,},});// gantt state which will be updated in realtimelet ganttState, ganttInstance;// listen to 'gantt-elastic.ready' or 'gantt-elastic.mounted' event// to get the gantt state for real time modificationapp.$on('gantt-elastic-ready', (ganttElasticInstance) => {ganttInstance = ganttElasticInstance;ganttInstance.$on('tasks-changed', (tasks) => {app.tasks = tasks;});ganttInstance.$on('options-changed', (options) => {app.options = options;});ganttInstance.$on('dynamic-style-changed', (style) => {app.dynamicStyle = style;});ganttInstance.$on('chart-task-mouseenter', ({ data, event }) => {console.log('task mouse enter', { data, event });});ganttInstance.$on('updated', () => {//console.log('gantt view was updated');});ganttInstance.$on('destroyed', () => {//console.log('gantt was destroyed');});ganttInstance.$on('times-timeZoom-updated', () => {console.log('time zoom changed');});ganttInstance.$on('taskList-task-click', ({ event, data, column }) => {console.log('task list clicked! (task)', { data, column });});});// mount gantt to DOMapp.$mount('#app');</script></body>
</html>本文声明：
88x31.png
知识共享许可协议
本作品由 cn華少 采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
http://www.taodudu.cc/news/show-3368846.html
相关文章：
- 关于outlook2019/2016发送到outlook2010/2013的约会/日历中图片不显示的问题
- 使用tableau绘制出超市每天销售额的日历图
- Python：年月日日历图的显示操作、time模块常用法
- Unity自定义UI组件(七)渐变工具、渐变色图片、渐变遮罩
- win10系统自定义日历应用背景图片怎么设置
- 如何利用OUTLOOK邮箱提醒你每天上课把课程表导入日历
- angular2集成FullCalendar日历插件,高德地图，highcharts
- id文本框适应文字_id怎么把字体框的尺寸缩小
- 甘特图如何在日历上表示工作日
- 基于pyecharts的数据可视化(四)：1.基本图表之日历图
- 使用echarts画日历热力图自定义区间颜色值
- 【语言-c#】C#控件DateTimePicker 修改日历字体大小、颜色
- 微信诱导分享规则
- 小程序诱导分享封号警钟长鸣
- 微信诱导关注php源码,微信公众平台关于在线网页制作类诱导关注的公告
- 抽奖类小程序诱导分享复盘
- 微信小程序二：获取手机号+分享给好友
- 微信内提示“网页包含诱导分享、关注等诱导行为内容，已停止访问”的解决方案...
- 微信内提示“网页包含诱导分享、关注等诱导行为内容，已停止访问”的解决方案
- android分享朋友圈功能,微信小程序实现分享至朋友圈的功能来啦
- 友盟分享小程序_来啦！小程序支持分享朋友圈！
- 微信分享源码PHP版JS-SDK接口_php h5微信分享 JSSDK
- 已停止访问该网页-微信域名拦截检测接口分享
- 【单应变换】通过空间平面诱导的单应公式的理解
- 微信分享的坑
- 什么是日光诱导叶绿素荧光？
- 微信中打开分享链接提示已停止访问该网页的原因及解决办法
- 肠炎造模小课堂|DSS如何诱导非啮齿类动物肠炎模型
- PHP返回前端诱导分享语句，类似拼多多，UC标题党，根据ip划分区域
- 【vue/uni-app】微信sdk分享功能在vue中开发中的一些个人纪录
组件分享之前端组件——甘特图时间表时间线日历组件相关推荐
- 组件分享之前端组件——用于自定义表单的前端组件form-create
组件分享之前端组件--用于自定义表单的前端组件form-create 背景 近期正在探索前端.后端.系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下,形成标准化组件专题,后续该专题将包含各 ...
- 组件分享之前端组件——初学者的web开发课程Web-Dev-For-Beginners
组件分享之前端组件--初学者的web开发课程Web-Dev-For-Beginners 背景 近期正在探索前端.后端.系统端各类常用组件与工具,对其一些常见的组件进行再次整理一下,形成标准化组件专题, ...
- 推荐算法三视角:矩阵，图，时间线
关于推荐系统,如果在忘掉所有的公式和代码,忘记所有的语言描述,脑海里就剩下几张图景,会是什么?一张二维表格,一个拓扑图,一条时间线.这三幅图景,是我看待推荐算法的三种视角. 视角一:矩阵视角 在脑中想 ...
- gram矩阵_推荐算法三视角:矩阵，图，时间线
关于推荐系统,如果在忘掉所有的公式和代码,忘记所有的语言描述,脑海里就剩下几张图景,会是什么?一张二维表格,一个拓扑图,一条时间线.这三幅图景,是我看待推荐算法的三种视角. 视角一:矩阵视角 在脑中想 ...
- 如何在前端实现甘特图？SpreadJS两招搞定
SpreadJS v14.0正式版下载 如果一个项目由多个任务组成,而任务之间又有关联,我们该怎样准确的显示项目整体进度呢? 使用甘特图,应该是最好的方式. 甘特图,不仅能够让管理者实时有效的掌握项目 ...
- echarts vue 酷炫图_pyecharts 时间线酷炫功能再度来袭！
经过几天加班加点的工作,pyecharts 又更新版本了,新版本为 0.1.9.5.此处需要掌声! 下面言简意赅地介绍一下主要更新内容: 1. 删除冗余 js 文件,压缩项目体积. 2. 为 3D 图 ...
- 软件工程之软件工程管理，软件项目管理（甘特图、时标网络图TSN，COMOMO模型）
软件工程的定义: 软件工程是研究和应用如何以系统性的.规范化的.可定量的过程化方法去开发和维护软件,以及如何把经过时间考验而证明正确的管理技术和当前能够得到的最好的技术方法结合起来. 项目管理的定义: ...
- wps 甘特图_制作甘特图提升办公效率！亿图下的这款项目管理软件很不错
距离春节还有5天 很多小伙伴为了提升办公效率可谓绞尽脑汁,但是却没有能够想出办法!其实提醒办公效率的方法有很多,今天小编就为大家分享一种.那就是通过制作甘特图来实现,快来试试看这款亿图旗下的项目管理软 ...
- 前端甘特图组件开发（一）
背景 工作中需要在网页上实现甘特图,以展示进度数据.通过网上调研相关项目,找到一款 dhtmlx-gantt 组件,在低程度上满足项目需求,但在部分定制功能(如时间轴自定义.编辑弹窗样式风格等)并不能 ...
最新文章
- 019_Vue子组件向父组件传值
- [Hive_add_11] Hive 使用 UDTF 实现日志降维
- ae 创建图像等高线 蒙版_如何用AE创建简单的UI动效
- 团体程序设计天梯赛-练习集 L1-002 打印沙漏
- 1.有意义的命名(代码的整洁之道)
- CRM One order里user status和system status的mapping逻辑
- SharePoint 2013 关于自定义显示列表表单的bug
- linux下得到date命令,linux下date命令获得今天日期的用法
- 统计数字（信息学奥赛一本通-T1239）
- 解决libreadline.so.6: cannot open shared object file: No such file or directory的问题
- FD.io VPP对 DPDK的详细配置：绑定网卡，启动VPP
- ai人工智能的数据服务_可解释的AI-它对数据科学家有何影响？
- 手眼标定原理ur5_手眼标定实现
- 基于TCP协议的游戏代理接口测试工具＜二＞：工具架构与代理主体实现
- hp服务器修改阵列,HP ProLiant 服务器 修改磁盘阵列的方法
- 2018ICPC网络赛(焦作站)E题题解
- python字体类型arial_python-3.x - 为什么我的font.name属性不影响使用Python-pptx制作的ppt上的字体？ 我总是得到arial字体 - 堆栈内存溢出...
- 怎么让steam允许访问自己的计算机,科技教程：电脑steam软件如何解决好友网络无法访问...
- semantic navigation 目标驱动的视觉语义导航（二）
- MySQL集群解决方案