本文适用于 dhtmlxScheduler 6.0 及更早版本。如需 7.0 及以上版本的详细信息,请参阅此处。
本文主要介绍通过以下四种常见场景来调整刻度单位和事件框的尺寸:
问题1: 在调度器中,短于1小时的事件显示和1小时事件一样大小。目标是让短事件能够正确适配刻度。
问题2: 同一小时内发生在不同时间的短事件会重叠。目标是避免此类重叠。
问题4: 默认刻度间隔为1小时,但有时需要更改为30分钟等其他时间间隔。
首先来看事件框的默认行为:
如果需要让30分钟的事件能够正确适配刻度,可以通过以下两种方式实现:
可以通过配置项 scheduler.config.hour_size_px
调整刻度单位的高度。
例如,将单位高度加倍,可以这样设置:
scheduler.config.hour_size_px = 88;
scheduler.init(...);
这样设置后,刻度单位高度变为88px,30分钟的事件高度就是44px,能够与刻度相匹配。
Related sample: Changing the Y-Axis step
如需自定义事件框的显示方式,可以使用 scheduler.renderEvent
方法,允许你为事件提供自定义模板。
scheduler.renderEvent = function(container, ev) {
// your customization code here
}
更多细节请参阅 自定义事件框 章节。
Related sample: Custom event box
为了让短事件分开展示且不重叠,可以启用 scheduler.config.separate_short_events
选项:
scheduler.config.separate_short_events = true;
调度器的背景由图片控制。要更新背景,可以覆盖 CSS 类 .dhx_scale_holder,例如:
<style>.dhx_scale_holder {
background-image: url("imgs/myNewImage.png");
}
</style>
然后初始化调度器:
scheduler.init(...);
如需调整默认的刻度间隔,可以重写 scheduler.templates.hour_scale
模板。例如,将间隔改为30分钟,可以这样修改模板:
var format = scheduler.date.date_to_str("%H:%i");
var step = 30;
scheduler.templates.hour_scale = function(date){
var html="";
for (var i=0; i<60/step; i++){
html+="<div style='height:22px;line-height:22px;'>"+format(date)+"</div>";
date = scheduler.date.add(date,step,"minute");
}
return html;
}
相关示例:
返回顶部