自定义事件内容

要定制事件的内容并决定显示哪些数据,模板是最佳方式。不同的视图依赖于不同的模板,想要了解某个特定视图使用了哪些模板,请参阅文章 格式化标签、日期、样式

本文重点介绍如何修改最常用视图 日视图周视图 的模板。

这些视图通过两个模板来自定义事件文本:

此外,还有 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");
返回顶部