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