dhtmlxscheduler timeline

原创
2016/03/21 17:51
阅读数 835

项目中用到了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,
展开阅读全文
打赏
1
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
1
分享
返回顶部
顶部