文档章节

dhtmlxscheduler timeline

xiaoyang0878
 xiaoyang0878
发布于 2016/03/21 17:51
字数 357
阅读 183
收藏 0

项目中用到了dhtmlxscheduler,主要是使用了它的Timeline,但在使用中发现原来的功能不满足项目中的要求,于是只有自己来修改源码、调整了。

 一、调整每个单元格(时间、事件单元格)的宽度,支持滚动条:

    a.设置单元格宽度主要修改dhtmlxscheduler_timeline.js文件中的,

scheduler._ignores[h]?(scheduler._cols[h]=0,o++):scheduler._cols[h]=Math.floor(s/(o-h))

修改为

scheduler._ignores[h] ? (scheduler._cols[h] = 0, o++) : scheduler._cols[h] = 50,

其中50就是自己可以定义的一个值。

b.实现显示滚动条,主要是添加两个class,一个是对dhx_cal_data,一个是对dhx_second_cal_header:

.dhx_second_cal_header
{
width: 1120px !important;  /**自己定义**/
}

 .dhx_cal_data{
	top: 0 !important;
	position:relative;
 	overflow:auto !important;
	border-top: none;
	width: 1120px !important;/**自己定义**/
	left: 16px !important;/**自己定义,主要是让Y轴滚动条显示在外一点**/
 }

为了使header,data中的边框线对为齐,还需要修改 dhtmlxscheduler_timeline.js文件 ,代码如下:

style_width: "width:" + (this.dx - 1) + "px;",

修改为

style_width: "width:" + (this.dx - 1) + "px; min-width:" + (this.dx - 17) + "px;",

二、实现滚动data的X轴滚动条,同时滚动header,代码如下:

var headerMaxScrollLeft = $(".dhx_cal_header")[0].scrollWidth - $(".dhx_cal_header")[0].clientWidth;
				if($(".dhx_cal_data").scrollLeft() >= headerMaxScrollLeft){
					$(".dhx_cal_data").scrollLeft(headerMaxScrollLeft);
				}
				$(".dhx_cal_header").scrollLeft($(".dhx_cal_data").scrollLeft());

三、由于出现滚动条后,对于通过双击或鼠标拖拽生成Event时,时间显示不对,需要修改dhtmlxscheduler.js,修改如下:

x: e.pageX,

修改为:

x: $(".dhx_cal_data").scrollLeft() + e.pageX,

© 著作权归作者所有

xiaoyang0878
粉丝 17
博文 52
码字总数 7963
作品 0
闸北
程序员
私信 提问
dhtmlxScheduler现可更好支持iPad触摸屏

dhtmlxScheduler 是一个基于Web的日程安排系统,类似 Google 的 Calendar 服务。支持拖拉操作,全部基于 Ajax 操作方式。 日前 dhtmlxScheduler发布更新,更好的支持 iPad 的触摸屏操作,还包...

红薯
2010/08/05
615
0
dhtmlxScheduler 4.0 集成了 jQuery,Backbone.js 等

dhtmlxScheduler 4.0 发布了,该版本增加了和 jQuery 和 Backbonejs 的集成,同时引入了一些新特性,改进了文档。 值得关注的改进有: 可定制的时间尺度 月视图的 UI 增强 详细改进记录请看 ...

红薯
2013/07/07
1K
2
怎么利用dhtmlxscheduler.js实现排课功能?

<%@ page language="java" isELIgnored="false" contentType="text/html; charset=utf-8" pageEncoding="UTF-8"%> 页面显示成这样 不能编辑而且不能任何自动选择节次,这该怎么办啊?......

wenwen1
2013/08/27
1K
0
dhtmlxScheduler 3.6 发布,支持 Windows 8

dhtmlxScheduler 是一个基于Web的日程安排系统,类似 Google 的 Calendar 服务。支持拖拉操作,全部基于 Ajax 操作方式。 dhtmlxScheduler 3.6 发布了,除了一些 bug 修复之外,该版本包含一...

红薯
2012/12/05
607
0
dhtmlxScheduler 4.3.25 维护版本发布

dhtmlxScheduler 4.3.25 维护版本发布,该版本支持触摸屏操作,已经修复了两次触摸的动作处理 bug。 修复的 bug 列表包括: Touch support – trigger tap and double tap on multiday area ...

红薯
2016/03/04
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

实战项目-学成在线(一)

之前看的黑马程序员实战项目之一,打算以博客的形式写出来,也让自己重新温习一下。 1、项目背景 略(就是当前这东西很火,我们重点在开发,这些就略过) 2、功能模块 门户,学习中心,教学管...

lianbang_W
33分钟前
3
0
基于Vue的数字输入框组件开发

本文转载于:专业的前端网站➫基于Vue的数字输入框组件开发 1、概述 Vue组件开发的API:props、events和slots 2、组件代码 github地址:https://github.com/MengFangui/VueInputNumber 效果:...

前端老手
41分钟前
3
0
百度地图根据经纬度获取运动轨迹

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=n......

泉天下
43分钟前
5
0
学习记录(day04-axios增删改查、v-for循环、页面加载成功处理函数)

[TOC] 1.1 基本语法:插值表达式 <template> <div> {{username}} <br/> {{1+2+3}} <br/> {{'你的名字是:' + username}} <br/> {{'abc'.split('')}} </div><......

庭前云落
今天
5
0
CentOS Linux 7上将ISO映像文件写成可启动U盘

如今,电脑基本上都支持U盘启动,所以,可以将ISO文件写到U盘上,用来启动并安装操作系统。 我想将一个CentOS Linux 7的ISO映像文件写到U盘上,在CentOS Linux 7操作系统上,执行如下命令: ...

大别阿郎
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部