如何将DHTMLX Suite集成到Scheduler Lightbox中?让项目管理更可控!

在构建JavaScript调度器时,通常需要为最终用户提供一个他们喜欢的方式来计划事件,这是Web开发人员喜欢认可DHTMLX Scheduler的重要原因,它在这方面提供了完全的操作自由,它带有lightbox弹出窗口,允许通过各种控件动态更改事件的细节。

但是如果想用DHTMLX Suite库中的小部件来补充Scheduler的lightbox,该怎么办呢?在本文中,我们将逐步指导您如何将DHTMLX Suite小部件嵌入到Scheduler组件的lightbox中。

DHTMLX Suite正式版下载

六个步骤将DHTMLX Calendar添加到调度器的Lightbox

DHTMLX Suite库中的任何小部件都可以无缝地集成到Scheduler组件的编辑表单中,对于所有小部件,算法几乎是相同的。因此我们以DHTMLX Calendar为例,说明如何在实践中做到这一点。我们将把这个功能与启用的时间选择器放在调度器的lightbox中,它有助于方便地以12或24小时格式指定事件的日期和持续时间。

下面是预期的结果:

DHTMLX Diagram流程图形状图

Step 1

首先,有必要在scheduler.form_blocks中创建一个新的编辑器对象。为此必须使用返回HTML元素的render方法,在此方法中,您只需创建容器,并在其中生成日期选择器。

scheduler.form_blocks["custom_date_editor"]={
render:function(config){ // config- section configuration object
return `<div class='custom_date_editor-wrapper'>
<div name="start_date"></div>
<div name="end_date"></div>
</div>
`;
},set_value:function(node,value,ev,config){},
get_value:function(node,ev,config){},
focus:function(node){
}
};
Step 2

之后必须创建公共变量startDateCalendar和startDateCalendar:

let startDateCalendar;
let endDateCalendar;

这些变量用于访问将放置时间选择器的日历对象。

Step 3

下一步是创建initcalendar()函数,当您需要重新初始化日历时,即每次打开lightbox时调用它,该函数还在创建新日历之前使用析构函数方法删除任何旧日历(如果它们存在)。timePicker属性的值应设置为true,以补充日期选择功能,使其能够选择计划事件的时间。在下面的代码示例中,我们还使用了dhx_widget - borderdered CSS类来帮助指定日历的边框。

function initCalendars(startDateElement, endDateElement){
if(startDateCalendar){
destroyCalendars();
}
startDateCalendar = new dhx.Calendar(startDateElement, {
timePicker: true,
css: "dhx_widget--bordered"
});
endDateCalendar = new dhx.Calendar(endDateElement, {
timePicker: true,
css: "dhx_widget--bordered"
});
}function destroyCalendars(){
if(startDateCalendar){
startDateCalendar.destructor();
endDateCalendar.destructor();
startDateCalendar = null;
endDateCalendar = null;
}
}
Step 4

现在是时候考虑lightbox控件对象中的set_value函数了,每当控件接收到新值时,就调用此方法。当lightbox打开时,当控件通过API接收到一个新值时,就会发生这种情况。

这就是您必须初始化日历并填充其值的地方:

set_value:function(node,value,ev,config){
initCalendars(node.querySelector("[name='start_date']"), node.querySelector("[name='end_date']"));startDateCalendar.setValue(new Date(ev.start_date));
endDateCalendar.setValue(new Date(ev.end_date));
},
Step 5

为了使控件能够在事件中保存这些值,必须从get_value函数返回这些值。

在我们的例子中,函数看起来像这样:

get_value:function(node,ev,config){
const start_date = startDateCalendar.getValue(true);
const end_date = endDateCalendar.getValue(true);
ev.start_date = start_date;
ev.end_date = end_date;
return {
start_date,
end_date
};
},

澄清在这里做的两件事情是很重要的:

  1. 您可以修改通过参数传递的事件,并直接为该对象分配新的日期值。对于映射到事件的几个不同属性的控件,这是一种常见的方法。
  2. 从函数返回日期选择器值作为{start_date, end_date}对象,它允许scheduler.formSection(name). getvalue()方法访问控件值。

当实现映射到事件对象单个属性的简单控件时,不需要修改事件对象,只需要从方法返回值,返回值将自动分配给事件对象的相应属性。

Step 6

最后需要在日历不再需要时销毁它们,通常使用DHTMLX Scheduler的onAfterLightbox事件来完成:

scheduler.attachEvent("onAfterLightbox", destroyCalendars);

在这个示例中,您可以看到带有嵌入式时间选择器功能的事件日历,并使用它。

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

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

相关文章

linux信号量

通过学习linux的信号量&#xff0c;对linux的信号量进行了编程。

Fragment.onStop的事情

继续承接上一篇文章----Fragment.OnPause的事情&#xff0c;我们知道onPause之后进入的是onStop生命周期方法&#xff0c;那Fragment的onStop方法又干了些什么呢&#xff1f; 还是从Activity入手&#xff0c;相应的入口代码如下&#xff1a; //FragmentActivity.java/*** Disp…

7英寸触摸显示屏企业网络电话

SV-X77英寸触摸显示屏企业网络电话 SV-X7网络电话是一款带有7英寸触摸显示屏的高端式企业级电话&#xff0c;以先进设计及强大的功能大幅度提高企业工作效率。 功能亮点 √ 虚拟可编程按键 — 可动态显示4个分页&#xff0c;每页可设置显示29个DSS键的状态&#xff0c;最多支持…

设计模式之适配器与装饰器

目录 适配器模式 简介 角色 使用 优缺点 使用场景 装饰器模式 简介 优缺点 模式结构 使用 使用场景 适配器模式 简介 允许将不兼容的对象包装成一个适配器类&#xff0c;使得其他类可以通过适配器类与原始对象进行交互&#xff0c;从而提高兼容性 角色 目标角色…

Debezium-增量迁移之 Oracle 迁移所需权限

-- 创建用户 create user TCK identified by oracle; -- 赋权 grant connect,resource to TCK; -- 删除权限 revoke select any table from TCK&#xff1b; revoke select any DICTIONARY from TCK&#xff1b; -- 删除用户 CASCADE(用户下的数据级联删除) drop user TCK CASC…

拼多多订单打单接口 免申请审核流程接入(拼多多开放平台接入)

pdd.erp.order.sync erp打单信息同步 更新时间&#xff1a;2021-04-13 23:04:54 免费API必须用户授权 erp打单信息同步 公共参数 名称类型必须描述keyString是调用key&#xff08;注册获取APIkey&#xff09;secretString是调用密钥api_nameString是API接口名称&#xff…

JS中的扩展操作符...(点点点)

标题 前言概述拓展操作符&#xff08;Spread Operator&#xff09;赋值与扩展操作符的区别 剩余操作符&#xff08;Rest Operator&#xff09; 前言 大家应该都在代码中用过或者看到…方法&#xff0c;我每次用到这个方法的时候都会想到第一次见到这个方法一头雾水的样子&#…

淘宝/天猫 API 接入说明

API地址:https://o0b.cn/anzexi 调用示例&#xff1a; 参数说明 通用参数说明 参数不要乱传&#xff0c;否则不管成功失败都会扣费url说明 https://api-gw.onebound.cn/平台/API类型/ 平台&#xff1a;淘宝&#xff0c;京东等&#xff0c; API类型:[item_search,item_get,ite…

数学建模--粒子群算法(PSO)的Python实现

目录 1.开篇提示 2.算法流程简介 3.算法核心代码 4.算法效果展示 1.开篇提示 """ 开篇提示: 这篇文章是一篇学习文章,思路和参考来自:https://blog.csdn.net/weixin_42051846/article/details/128673427?utm_mediumdistribute.pc_relevant.none-task-blog-…

F#奇妙游(25):ADT和领域设计

前言 采用ADT来对领域进行设计&#xff0c;是一种很好的实践。在这种实践中&#xff0c;我们可以把领域中的数据抽象成ADT&#xff0c;把领域中的操作抽象成函数&#xff0c;然后利用ADT的类型系统来进行类型检查&#xff0c;从而保证领域中的数据和操作的正确性。 设计目标 …

【AGC】云数据库API9开发问题汇总

【问题描述】 云数据库HarmonyOS API9 SDK已经推出了一段时间了&#xff0c;下面为大家汇总一些在集成使用中遇到的问题和解决方案。 【问题分析】 1. 报错信息&#xff1a;数据库初始化失败&#xff1a;{“message”&#xff1a;“The object type list and permission …

云原生Kubernetes:K8S常用服务端口

目录 一、理论 1.K8S常用服务端口号 一、理论 1.K8S常用服务端口号 &#xff08;1&#xff09;K8S集群 表1 K8S集群端口 协议端口号K8S集群TCP22使用主机驱动通过SSH进行节点配置TCP2376主机驱动与Docker守护进程通信的TLS端口TCP2379etcd客户端请求TCP2380etcd节点通信U…

PgSQL-并行查询系列-介绍[译]

PgSQL-并行查询系列-介绍 现代CPU模型拥有大量的CPU核心。多年来&#xff0c;数据库应用程序都是并发向数据库发送查询的。查询处理多个表的行时&#xff0c;若可以使用多核&#xff0c;则可以客观地提升性能。PgSQL 9.6引入了并行查询的新特性&#xff0c;开启并行查询后可以大…

es(Elasticsearch)介绍

学习es可以参考mysql&#xff08;相比mysql而言&#xff0c;es所需的cpu、内存更多&#xff09; 什么是Elasticsearch Elasticsearch简称es&#xff0c;是由Elastic和search组成。Elastic的意思是有弹性的&#xff0c;search的意思是搜索。 弹性&#xff1a;es是一个天生支持分…

笔记:linux中LED(GPIO)驱动设备树配置和用法

设备树中节点配置 设备树中的LED驱动一般是这样写&#xff0c;LED驱动可以控制GPIO的电平变化&#xff0c;生成文件节点很方便 leds: leds {compatible "gpio-leds";gpio_demo: gpio_demo {label "gpio_demo";gpios <&gpio0 RK_PC0 GPIO_ACTIV…

晶圆键合对准机的原理与应用

一、晶圆键合设备的工作原理 1、 第一个晶圆面朝下置于晶圆对准设备卡盘并传送到对准机内&#xff1b; 2、对准机内&#xff0c;晶圆在Z轴方向上移动直到被顶部的传输夹具真空吸附固定&#xff1b; 3、被传输夹具固定的第一个晶圆将成为后续对准工艺的基准&#xff0c;确定所…

51、基于注解方式开发Spring WebFlux,实现生成背压数据,就是实现一直向客户端发送消息

★ Spring WebFlux的两种开发方式 1. 采用类似于Spring MVC的注解的方式来开发。此时开发时感觉Spring MVC差异不大&#xff0c;但底层依然是反应式API。2. 使用函数式编程来开发★ 基于注解开发Spring WebFlux 开发上变化并不大&#xff0c;主要是处理方法的返回值可使用Mon…

大数据组件系列-Hadoop每日小问

1、谈谈对HDFS的理解&#xff1f;HDFS这种存储适合哪些场景&#xff1f; HDFS即Hadoop Distributed File System&#xff0c;Hadoop 分布式文件系统。它为的是解决海量数据的存储与分析的问题&#xff0c;它本身是源于Google在大数据方面的论文&#xff0c;GFS-->HDFS; HD…

Mybatis的三种映射关系以及联表查询

目录 一、概念 二、一对一 1、配置generatorConfig.xml 2、Vo包的编写 3、xml的sql编写 4、编写对应接口及实现类 5、测试 三、一对多 1、Vo包类的编写 2、xml的sql编写 3、编写对应接口及实现类 4、测试 四、多对多 1、Vo类 2、xml的sql配置 3、接口及接口实现…

文件编辑器、用户管理,嘎嘎学

打开文件 vim # 首先你先得下载这个插件 yum install -y vim vim 文件名 进入编辑模式 i #在光标所在处进入编辑模式 a #在当前光标后面进入编辑模式 o #在光标的下一行进入编辑模式 I #在光标所在处行首进入编辑模式 A #在光标所在处行尾进入编辑模式 O #在光标的上一…