甘特图组件DHTMLX Gantt示例 - 如何有效管理团队工作时间?(一)

news2024/11/19 17:45:06

如果没有有效的时间管理工具,如工作时间日历,很难想象一个项目如何成功运转。这就是为什么我们的开发团队非常重视项目管理,并提供了多种选择来安排DHTMLX Gantt的工作时间。使用DHTMLX Gantt这个JavaScript库,您可以创建一个强大的甘特图,并用一个或多个工作时间日历来补充它。

在本文中,我们将回顾如何在Web项目中使用DHTMLX Gantt工作日历功能的有趣示例。

DHTMLX Gantt正式版下载

DHTMLX Gantt中工作日历背后的关键概念

首先,让我们考虑一下甘特图组件是如何处理日期和日历的。

默认情况下,当禁用work_time选项时,任务的持续时间取决于duration_unit参数和任务日期(开始和结束),而工作和非工作时间将被忽略。在这种情况下,就像在MS Project中一样,使用了全时日历。

如果启用了work_time选项,并且没有更改其他选项,则Gantt开始考虑工作时间。换句话说,根据预定义的设置,周末/节假日被视为完全不工作,工作时间从早上8点到下午5点,午休时间为1小时。

从表面上看,Gantt似乎已经开始利用工作时间,但实际上,它利用了一个应用于所有任务的全局日历,该日历的设置是通过setWorkTime方法指定的。

此外,还可以为每个任务或任务组设置单独的工作时间设置,这是在自定义日历的帮助下实现的。使用createCalendar和addCalendar方法创建这样一个日历,要将此日历分配给某个任务,必须在任务对象的calendar_id参数中指定日历的ID。

综上所述,我们可以区分出在甘特图项目中使用工作时间功能的三种方式:

  • 全时日历
  • 全局日历
  • 自定义日历

利用丰富的DHTMLX Gantt API,您可以使用工作日历做很多有用的事情。

甘特图组件DHTMLX Gantt示例图

例如,可以将工作日历分配给特定的任务、资源(如上图所示)或项目。除此之外,我们的dhtmlxGantt组件允许对一个日历中的特定时间段应用不同的工作时间规则,将多个日历合并为一个日历,并动态更改它们。

工作时间日历的用例

现在我们继续在实际场景中使用DHTMLX Gantt的工作时间日历功能的实际示例。

在全局日历中设置周末/节假日

在DHTMLX Gantt中,有几种方法可以指定工作是回见设置。以一种简单的方式,应用setWorkTime方法就足够了。

该方法接受一个参数 - worktime配置对象,它具有以下属性:

  • date – 将应用工作时间的日历日期,必须是js[Date object]。
  • day – 工作日编号,取值范围为0 ~ 6之间的数字,周日为0,周一为1,以此类推。
  • hours – 工作时间设置,该值可以是“true”、“false”或工作时间数组。

该对象必须包含日期和小时或日和小时属性,这些属性允许将工作时间规则设置为特定的星期或特定的日期。

考虑一下这些例子:

– 将9月1日定为节假日:

gantt.setWorkTime({
date:new Date(2021,8,1),
hours:false
});

– 设置9月1日的自定义工作时间:

gantt.setWorkTime({
date:new Date(2021,8,1),
hours: ["8:00-11:00", "12:00-14:00"]
});

– 将星期日定为工作日,采用全局工作时间;

gantt.setWorkTime({
day: 0,
hours: true
});

– 星期五的工作时间:

gantt.setWorkTime({
day: 5,
hours: ["8:00-10:00"]

日期可以存储在服务器上,然后加载到甘特图项目中。下面的示例包含一个日期数组,在使用此数组中的日期之前,必须将它们从字符串格式转换为日期格式。之后可以在setWorkTime方法中使用日期,因此非工作日从数组中取出并应用于所有任务。

甘特图组件DHTMLX Gantt示例图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1081651.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

自定义一个简单的操控器类

目录 1. 前言 2. 操控器需求 3. 功能实现 3.1. 预备知识 3.2. 代码实现 3.3. 代码难点说明 1. 前言 osg已经自己实现了很多操控器类,这些操控器类存放在osg源码目录下的src\osgGA目录。感兴趣的童鞋,可以自己去研究源码。下面两篇博文是我研究osg的…

设备管理工具

做了一个代理类,抽象出来后在注册表中,查找已经注册的设备 python 中 dict 和 lua 中的 table 一样高效 先初始化找到的设备通信程序,底层接口准备好C,这个设备调试界面就是可以用的,剩下就是MV了 软件升级已经稳定可用了 包括软件的备份和回滚操作登录时为设备页面…

【工作流引擎】Activiti的使用03

流程定义查询 // 获取部署时的信息ProcessEngine processEngine ProcessEngines.getDefaultProcessEngine();RepositoryService repositoryService processEngine.getRepositoryService();ProcessDefinitionQuery processDefinitionQuery repositoryService.createProcessDe…

直观全面解释Transformer模型;上海人工智能实验室推出首个图文混合创作大模型浦语灵笔

🦉 AI新闻 🚀 上海人工智能实验室推出首个图文混合创作大模型浦语灵笔 摘要:上海人工智能实验室推出了一款名为浦语灵笔的图文混合创作大模型,并宣布其开源。浦语灵笔基于书生・浦语大语言模型,具备强大的多模态性能…

LabVIEW开发卫星测试平台

LabVIEW开发卫星测试平台 已经有不少的大学和研究机构经常使用立方体卫星。它们的广泛使用通常归因于使用廉价零件、无偿学生劳动和简单的设计。科学、技术、工程和数学学生已被证明可以通过参与实际工作宇宙飞船系统的规划、开发和测试而从中受益。通过鼓励来自不同学术领域的…

Kubernetes----基于kubeadm工具在CentOS7.9虚拟机上部署一主两从类型的1.26版本的Kubernetes集群环境

【原文链接】Kubernetes----基于kubeadm工具在CentOS7.9虚拟机上部署一主两从类型的1.26版本的Kubernetes集群环境 文章目录 一、虚拟机环境准备1.1 准备三台CentOS操作系统的虚拟机1.2 修改主机名1.3 确认CentOS的版本符合要求1.4 配置地址解析1.5 配置时间同步1.6 关闭防火墙…

【jmeter的使用】【性能测试1】

jmeter的使用笔记2 线程并发的设置定时器1)同步定时器2)准确的吞吐量定时器3)常数吞吐量定时器 用户自定义变量设置响应断言聚合报告查看聚合报告参数详解: 前言:使用jmeter进行简单性能测试实践,以百度搜索…

Java中的错误和异常有什么区别和联系?

​ 概述 错误 该错误表示大多数情况是由于系统资源不足而发生的。系统崩溃和内存错误就是错误的例子。它主要发生在运行时。 错误是用户执行意外操作时产生的严重情况;错误大多发生在编译时,如语法错误,但它也可能发生在运行时&#xff1…

UE5:如何解决背景图片被拉伸的问题?

1.在图片外围包裹一个Scale Box组件 2.将图片的尺寸修改为原始尺寸就可解决问题

北美”闲鱼”Poshmark,如何销售提高成单率?附防封养号攻略

Poshmark 是一款美国的社交商务应用程序,被称为北美的”咸鱼“。该平台提供女性、男性、儿童时尚和家居装饰品。目前在美国、加拿大、澳洲、印度均可开通,其余地区暂不支持。 在平台上,用户可以自由上传和销售产品。Poshmark提供安全的支付解…

【Zookeeper专题】Zookeeper选举Leader源码解析

目录 前言阅读建议课程内容一、ZK Leader选举流程回顾二、源码流程图三、Leader选举模型图 学习总结 前言 为什么要看源码?说实在博主之前看Spring源码之前没想过这个问题。因为我在看之前就曾听闻大佬们说过【JavaCoder三板斧:Java,Mysql&a…

设计模式_责任链

责任链模式 介绍 设计模式定义案例责任链模式问题 传给 多个可处理人 这多个处理人做成一个链表学生请假条审核 上课老师(3天权限) 班主任 (5天权限) 校长 (30天权限) 问题堆积在哪里解决办法进一步优…

目标检测新思路:DETR

Transformer是一种基于自注意力机制的神经网络架构,它能够从序列中提取重要信息,已被广泛应用于自然语言处理和语音识别等领域。随着Transformer的提出和发展,目标检测领域也开始使用Transformer来提高性能。 DETR是第一篇将Transformer应用于…

点击弹窗页面右侧缩小问题

主页面是由header和下面的tabel&#xff0c;2个组件构成&#xff0c;需要在css里使用flex布局&#xff0c; 就解决了弹窗导致的页面右侧缩小问题。 display: flex; flex-direction: column; <template><div class"main"><div class"header"…

局域网远程控制

被控制端电脑设置 1开启服务 Romate Desktop Services 2设置允许远程控制&#xff0c;并且添加被控制的用户 3检查用户组管理用户名是否一致 我的电脑>管理>本地用户和组>用户 4在控制电脑端WinR 输入 mstsc出现如下界面 输入被控制电脑IP和用户名 然后输入被控制端…

第十届蓝桥杯省赛C++C/研究生组,第十届蓝桥杯省赛JAVAC/研究生组——扫地机器人题解(二分)

题目描述 小明公司的办公区有一条长长的走廊&#xff0c;由 N个方格区域组成&#xff0c;如下图所示。 走廊内部署了 K台扫地机器人&#xff0c;其中第 i台在第 A i A_i Ai​ 个方格区域中。 已知扫地机器人每分钟可以移动到左右相邻的方格中&#xff0c;并将该区域清扫干净…

Android组件通信(二十四)

1. Activity生命周期 1.1 知识点 &#xff08;1&#xff09;掌握Activity的生命周期及操作方法&#xff1b; 1.2 具体内容 范例&#xff1a; 第一个配置文件 <LinearLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http…

C语言常见题目(1)交换两个变量的值,数的逆序输出,猜数游戏,两个数比较大小等

我的个人主页&#xff1a;☆光之梦☆的博客_CSDN博客-C语言基础语法&#xff08;超详细&#xff09;领域博主 欢迎各位 &#x1f44d;点赞 ⭐收藏 &#x1f4dd;评论 特别标注&#xff1a;本博主将会长期更新c语言的语法知识&#xff0c;初学c语言的朋友们&#xff0c;可以收藏…

面试经典 150 题 3 —(双指针)— 167. 两数之和 II - 输入有序数组

167. 两数之和 II - 输入有序数组 方法一 class Solution { public:vector<int> twoSum(vector<int>& numbers, int target) {unordered_map<int,int> hashtable;for(int i 1; i < numbers.size(); i){auto item hashtable.find(target - numbers[…

Allegro基本规则设置指导书之Spacing规则设置

进入规则设置界面 1.设置Line 到其他的之间规则: 2.设置Pins 到其他的之间规则: 3.设置Vias 到其他的之间规则: