dhtmlxScheduler 允许您自定义事件的显示方式。
您可以通过 renderEvent 方法自定义事件:
scheduler.renderEvent = function(container, ev) {
// 你的自定义代码
}
Related sample: Custom event box
var html = "<div class='dhx_event_move my_event_move' "
以下是一个自定义事件外观的示例:
为事件框定义自定义外观
scheduler.templates.event_class = function(start, end, event) {
return "my_event";
};
scheduler.renderEvent = function(container, ev) {
var container_width = container.style.width; // 例如 "105px"
// 移动部分
var html = "<div class='dhx_event_move my_event_move' style='width: " +
container_width + "'></div>";
// 事件内容的容器
html += "<div class='my_event_body'>";
html += "<span class='event_date'>";
// 这里有两种选择:对于短事件仅显示开始时间,对于长事件显示开始和结束时间
if ((ev.end_date - ev.start_date)/60000 > 40) { // 如果事件持续超过40分钟
html += scheduler.templates.event_header(ev.start_date, ev.end_date, ev);
html += "</span><br/>";
} else {
html += scheduler.templates.event_date(ev.start_date) + "</span>";
}
// 显示事件文本
html += "<span>" + scheduler.templates.event_text(ev.start_date, ev.end_date, ev) +
"</span></div>";
// 调整大小部分
html += "<div class='dhx_event_resize my_event_resize' style='width: " +
container_width + "'></div>";
container.innerHTML = html;
return true; // 必须:true 使用自定义渲染,false 为默认渲染
};
相关的 CSS 如下所示:
<style type="text/css" > /* 整个容器的背景和边框 */
.my_event {
background: #add8e6;
color: black;
border: 1px solid #778899;
overflow: hidden;
display: block;
}
.dhx_cal_event_clear.my_event {
height: 22px;
}
/* 事件内容样式 */
.dhx_cal_event.my_event .my_event_body {
padding-top: 3px;
padding-left: 5px;
}
/* 事件时间样式 */
.my_event .event_date {
font-weight: bold;
padding-right: 5px;
}
/* 调整大小手柄 */
.my_event_resize {
height: 3px;
position: absolute;
bottom: -1px;
}
/* 移动手柄 */
.my_event_move {
position: absolute;
top: 0;
height: 10px;
cursor: pointer;
}
</style>
另外,您也可以使用 CSS 变量替代固定颜色,例如:
<style>.my_event {
--dhx-scheduler-event-background: #add8e6;
--dhx-scheduler-event-color: black;
--dhx-scheduler-event-border: 1px solid #778899;
overflow: hidden;
display: block;
}
</style>
Related sample: Custom event box
返回顶部