dhtmlxscheduler timeline

项目中用到了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,