要定制事件的内容并决定显示哪些数据,模板是最佳方式。不同的视图依赖于不同的模板,想要了解某个特定视图使用了哪些模板,请参阅文章 格式化标签、日期、样式。
本文重点介绍如何修改最常用视图 日视图 和 周视图 的模板。
这些视图通过两个模板来自定义事件文本:
此外,还有 event_bar_text 模板,用于设置多日事件的文本。该模板被 月视图 和 Timeline 视图 使用。
建议在 onTemplatesReady 事件的处理函数中重定义模板,这样可以防止你的模板被默认模板覆盖。
事件的标题由 event_header 模板控制。
//默认定义
scheduler.templates.event_header = function(start,end,ev){
return scheduler.templates.event_date(start)+" - "+
scheduler.templates.event_date(end);
};
假设你的数据对象中包含一个布尔属性 important,用于标记事件是否重要。你希望让重要的事件更加醒目,比如添加一个红色勾选图标,并将事件时长以橙色显示。
实现方法如下:
scheduler.attachEvent("onTemplatesReady", function(){
scheduler.templates.event_header = function(start,end,ev){
if (event.important == true){
return ("<img src='red_check.png'/> <b style='color:#F08080'>"+
scheduler.templates.event_date(start)+" - "+
} else {
return(scheduler.templates.event_date(start)+" - "+
scheduler.templates.event_date(end))
}
};
});
...
scheduler.init('scheduler_here', new Date(2019, 6, 5), "week");
事件文本由 event_text 模板设置。
//默认定义
scheduler.templates.event_text = function(start,end,ev){
return ev.text;
};
假设你的数据对象中有一个额外的属性 location,用于指示事件举办的地点。你希望在事件框中显示事件文本及其地点。
实现方法如下:
scheduler.attachEvent("onTemplatesReady", function(){
scheduler.templates.event_text=function(start,end,event){
return "<b>" + event.text + "</b><br><i>" + event.location + "</i>";
}
});
...
scheduler.init('scheduler_here', new Date(2019, 6, 5), "week");
返回顶部