日程安排组件DHTMLX Scheduler v7.0新版亮点 - 拥有多种全新的主题

news2025/6/22 10:02:29

DHTMLX Scheduler是一个类似于Google日历的JavaScript日程安排控件,日历事件通过Ajax动态加载,支持通过拖放功能调整事件日期和时间,事件可以按天、周、月三个种视图显示。

备受关注的DHTMLX Scheduler 7.0版本日前正式发布了,如果说之前的日程组件主要更新关注的是项目内部结构,那么这次的新版本则在用户界面方面有重大改进。

首先,这个主要更新显著增强了样式功能,包括重写的Scheduler主题、简化的使用CSS变量的主题自定义、更新的默认Terrace主题、新的Dark主题以及其他有用的更改。此外还可以看到更新的Agenda视图,它提供了一种显示即将发生事件列表的新方法等。

DHTMLX Scheduler 7.0正式版下载

主题更新

主题在现代JavaScript库的样式功能中起着至关重要的作用,但主题的重要性不仅在于使web应用更具视觉吸引力,因为它们还有助于实现个性化用户体验、增强可访问性、品牌一致性等目标。使用JavaScript库中包含的主题,web开发人员可以获得必要的灵活性,以更少的时间和精力定制UI以满足各种项目需求。

更新Terrace主题

在v7.0中,Terrace主题经历了一次彻底的改革,实现与现代设计标准一致的、充满活力的外观。

DevExpress WinForms v23.2新版产品图集

Terrace主题目前已经更新,更容易定制和解决许多视觉问题。

全新的暗黑主题

在近年来的顶级设计趋势中,您可能会在列表中找到一个暗黑主题(或暗黑模式)。深色主题不仅给UI带来了现代的外观,还有助于减少眼睛疲劳,提高可访问性,增强对内容的关注,并延长移动设备的电池寿命。因此如果在使用DHTMLX构建的JavaScript调度日历中缺少此功能,那么有一个好消息要告诉您,在7.0版本中,我们在DHTMLX Scheduler组件的可用内置主题列表中添加了dark选项。

DevExpress WinForms v23.2新版产品图集

使用CSS变量自定义主题

在这个版本中引入了对CSS变量的支持,标志着主题自定义的重大进步。CSS变量(也称为自定义属性)提供了一种更动态、更有效的样式化方法,您可以用更少的时间和精力自定义现有的Scheduler主题。

您可以通过更改几个关键变量轻松地修改Scheduler的外观,在整个应用程序中更改颜色、字体和其他样式元素现在可以通过更少的代码更改来完成。

下面是一个快速示例,向您展示新样式化方法的好处。对于开发人员来说,一个常见的Scheduler定制案例是更改事件颜色。在以前版本的Scheduler组件中,它需要更新特定的样式,如下所示:

/*event in day or week view*/
.dhx_cal_event.manager_event div{
background-color: #009966 !important;
color: black !important;
}
/*multi-day event in month view*/
.dhx_cal_event_line.manager_event{
background-color: #009966 !important;
color: black !important;
}
/*event with fixed time, in month view*/
.dhx_cal_event_clear.manager_event{
color: black !important;
}

使用DHTMLX Scheduler v7.0,您只需重新定义负责事件颜色的CSS变量:

.manager_event {
--dhx-scheduler-event-background: #009966;
--dhx-scheduler-event-color: black;
}

现在可以跨Scheduler更快地更改颜色、字体和其他样式元素。例如,更改JavaScript调度日历的配色方案就像重新定义一组颜色变量一样简单。这一变化简化了自定义,确保了灵活、可扩展的主题开发,从而使开发人员能够轻松地创建更个性化的用户体验。

DevExpress WinForms v23.2新版产品图集

新的Agenda(议程)视图设置

Agenda视图是JavaScript调度库中包含的五个基本选项之一,用于跟踪所有计划的安排。对于7.0版本,开发团队推出了一个完全重新设计的Agenda视图,新的议程视图的工作原理类似于Google Calendar和其他类似工具中使用的列表视图。

DevExpress WinForms v23.2新版产品图集

虽然旧的议程视图现在已弃用,但如果在项目中需要,它仍然可用。

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

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

相关文章

使用ROCm的HIP API向量加法程序

一、向量加法程序 Radeon Open Compute (ROCm) 是一个开源平台,用于加速高性能计算 (HPC) 和机器学习应用程序。它支持包括GPUs在内的多种硬件,并提供HIP (Heterogeneous-compute Interface for Portability) 作为CUDA代码的便捷转换工具。为了提供一个…

BPMN.JS中文教程学习

基础篇 vue bpmn.js 建模BpmnModeler将数据转图形bpmnModeler.importXML // basic.vue<script>// 引入相关的依赖import BpmnModeler from bpmn-js/lib/Modelerimport {xmlStr} from ../mock/xmlStr // 这里是直接引用了xml字符串export default {name: ,components: {…

使用 Docker 部署 Open-Resume 在线简历平台

1&#xff09;Open-Resume 介绍 GitHub&#xff1a; https://github.com/xitanggg/open-resume Open-Resume 是一款功能强大的开源 简历生成器 和 简历解析器 。可以帮助我们快速的生成个人简历&#xff0c;并定制化不同的主题和布局风格。该项目的目标是为每个人提供免费的现…

Qt5 编译 Qt Creator 源码中的 linguist 模块

文章目录 下载 Qt Creator 源码手动翻译多语言自动翻译多语言 下载 Qt Creator 源码 Github: https://github.com/qt/qttools 笔记打算用 Qt 5.12.12 来编译 qt creator-linguist 所以笔者下载的是 tag - 5.12.12 &#xff0c;解压后如下&#xff0c;先删除多余的文件&#xf…

视觉SLAM学习打卡【10】-后端·滑动窗口法位姿图

本节是对上一节BA的进一步简化&#xff0c;旨在提高优化实时性.难点在于位姿图部分的雅可比矩阵求解&#xff08;涉及李代数扰动模型求导&#xff09;&#xff0c;书中的相关推导存在跳步&#xff08;可能数学功底强的人认为过渡的理所当然&#xff09;&#xff0c;笔者参考了知…

B站广告推广操作教程及费用?

哔哩哔哩&#xff08;B站&#xff09;作为国内极具影响力的年轻人文化社区&#xff0c;已成为众多品牌与企业触达目标受众、提升品牌影响力的重要阵地。然而&#xff0c;面对B站复杂的广告系统与精细化运营需求&#xff0c;许多广告主可能对如何高效开展B站广告推广感到困惑。云…

2024年同城网总流量全新生态,个人工作室落地式游戏玩法,单账户月入3万

我要为大家解读的是本地生活新项目&#xff0c;这个业务模式中&#xff0c;即使是低收入的玩法&#xff0c;一个月赚取万儿八千也是完全可行的。而高收入的玩法&#xff0c;一单的收入甚至能超过一万。目前&#xff0c;你的圈子里已经有一些同行业的人开始以个人工作室的形式去…

stm32开发之threadx+netxduo(结合 modbus 编写tcp接口程序)

前言 本篇结合freemodbus源码程序进行移植,驱动实现的接口为modbus tcp需要知道threadx的 事件标志组、信号量、线程相关的知识需要知道netxduo tcp方面的api和创建流程方面的知识 freemodbus程序源码 本次使用的源码来自于rt-thread软件包里面的&#xff0c;可以参考之前的…

linux查看网络连接数

目录 netstat top netstat 1.netstat查看当前主机上网络连接信息&#xff0c;端口号&#xff0c;pid,程序名等等 #直接查看 netstat -anp #一般使用的时候&#xff0c;可能要筛选 #比如8080端口是否被占用 netstat -anp | grep 8080 #minio服务占用了那些端口 netstat -anp …

掌握判断IPv4地址是否正确的方法

在数字通信和互联网领域中&#xff0c;IPv4地址作为标识网络设备的核心元素&#xff0c;其正确性至关重要。一个有效的IPv4地址能够确保设备在网络中的正常通信和交互&#xff0c;而错误的IPv4地址则可能导致连接失败、通信中断甚至网络安全问题。因此&#xff0c;掌握判断IPv4…

【docker】之linux写shell脚本备份线上数据库(备份为dump文件)

目录 1. SH文件1.1 SH文件示例1.2 文件解释1.3 .sh文件执行 2. 备份线上数据库的.sh文件2.1 文件命令解析 3. 命令执行4. 线下dump文件的恢复与备份 环境&#xff1a;linux容器&#xff1a;docker 1. SH文件 SH文件通常指的是 Shell 脚本文件&#xff0c;文件后缀名为.sh&…

Spring Boot统一功能处理(一)

本篇主要介绍Spring Boot的统一功能处理中的拦截器。 目录 一、拦截器的基本使用 二、拦截器实操 三、浅尝源码 初始化DispatcherServerlet 处理请求&#xff08;doDispatch) 四、适配器模式 一、拦截器的基本使用 在一般的学校或者社区门口&#xff0c;通常会安排几个…

【C++学习】C++11新特性(第一节)

文章目录 ♫一.文章前言♫二.C11新特性♫一.统一的列表初始化♫二.std::initializer_list♫三.声明♫四.decltype关键字♫五.nullptr♫六.新增加容器---静态数组array、forward_list以及unordered系列♫6.1unordered_map与unoredered_set♫6.2array♫6.3 forward_list&#xff…

Leetcode算法训练日记 | day18

一、找树左下角的值 1.题目 Leetcode&#xff1a;第 513 题 给定一个二叉树的 根节点 root&#xff0c;请找出该二叉树的 最底层 最左边 节点的值。 假设二叉树中至少有一个节点。 示例 1: 输入: root [2,1,3] 输出: 1示例 2: 输入: [1,2,3,4,null,5,6,null,null,7] 输出:…

nandgame中的Memory(内存操作):栈、堆、静态区

Push Memory Push Memory 将内存中的值push到栈内堆栈顶部的值是一个内存地址。从堆栈中弹出地址。获取内存地址的当前内容&#xff0c;并将其推送到堆栈上。POP_A //堆栈顶部的值是一个内存地址。从堆栈中弹出地址。 D *A //获取内存地址的当前内容 PUSH_D //将其推送到…

JVM性能调优——运行时参数

文章目录 1、JVM参数选项类型1.1、标准参数选项1.2、非标准参数选项1.3、非稳定参数选项 2、添加JVM参数的方式3、常用JVM参数选项4、通过Java代码获取JVM参数5、小结 熟悉JVM参数对于系统调优是非常重要的。比如一个高流量的延迟的电子交易平台&#xff0c;它要求的响应时间都…

ROS机器人未知环境自主探索功能包explore_lite最全源码详细解析(五)

本系列文章主要针对ROS机器人常使用的未知环境自主探索功能包explore_lite展开全源码的详细解析&#xff0c;并进行概括总结。 本系列文章共包含六篇文章&#xff0c;前五篇文章主要介绍explore_lite功能包中 explore.cpp、costmap_tools.h、frontier_search.cpp、costmap_clie…

MySQL:关于数据库的一些练习题

文章目录 前面的内容已经把数据库的一些必要知识已经储备好了&#xff0c;因此下面就对于这些语句进行一些练习&#xff1a; 批量插入数据 insert into actor values (1, PENELOPE, GUINESS, 2006-02-15 12:34:33), (2, NICK, WAHLBERG, 2006-02-15 12:34:33);SQL202 找出所有…

C/S医学检验LIS实验室信息管理系统源码 医院LIS源码

LIS系统即实验室信息管理系统。LIS系统能实现临床检验信息化&#xff0c;检验科信息管理自动化。其主要功能是将检验科的实验仪器传出的检验数据经数据分析后&#xff0c;自动生成打印报告&#xff0c;通过网络存储在数据库中&#xff0c;使医生能够通过医生工作站方便、及时地…

一起学习python——基础篇(14)

今天讲一下python的json解析方式。 上一篇文章讲述了将传参数据转换为json格式的数据传给后台&#xff0c;如果后端返回的json格式数据&#xff0c;我们该如何解析呢&#xff1f; 例子一&#xff1a;简单的json数据格式 如果后端返回的json数据如下&#xff0c; { "na…