当标准视图无法完全满足您的需求时,可以选择创建自定义视图。
开始创建自定义视图时,首先需要为调度器添加一个新的标签页,用于表示您的新视图。通常如下所示:
<div class="dhx_cal_tab" data-tab="workweek"></div>
请注意:
要为视图设置标签文本,请使用:
scheduler.locale.labels.{viewName}_tab = "someName"
有三个关键方法用于定义视图的行为——它们决定了视图的区间(如周视图是一周,月视图是一个月等)以及当用户点击头部的 'Next' 或 'Prev' 按钮时的激活日期。
最后,您需要为视图头部日期和 X 轴刻度设置模板:
例如:
scheduler.templates.workweek_date = scheduler.templates.week_date;
scheduler.templates.workweek_scale_date = scheduler.templates.week_scale_date;
以下是如何创建一个名为 'workweek' 的自定义视图,其类似于周视图,但只显示工作日。
具体步骤如下:
<div id="scheduler_here" class="dhx_cal_container" ...>
<div class="dhx_cal_navline">
...
<div class="dhx_cal_tab" name="workweek_tab" style="right:280px;"></div>
</div>
</div>
scheduler.locale.labels.workweek_tab = "Work week"
scheduler.date.workweek_start = function(date) {
return scheduler.date.week_start(date);//
}
这里我们复用了周视图的 week_start() 方法,因为两个视图的起始日期相同。
scheduler.date.get_workweek_end=function(start_date){
return scheduler.date.add(start_date,5,"day");
}
add() 方法通过加减指定的时间间隔来调整日期。详细说明请参见 这里。
scheduler.date.add_workweek=function(date,inc){
return scheduler.date.add(date,inc*7,"day");
}
add() 方法用于处理时间间隔的加减。更多内容请参见 这里。
scheduler.templates.workweek_date = scheduler.templates.week_date;
此模板与周视图一致,因此我们直接复用默认的周视图模板 - week_date
scheduler.templates.workweek_scale_date = scheduler.templates.week_scale_date;
此模板同样来自周视图,以保证一致性 - week_scale_date
调度器初始化时显示的初始视图可在初始化阶段设置,详见 init。然而,由于自定义视图的模板在该阶段可能尚未完全处理,可能导致初始化失败。
为避免此问题,请确保在初始化调度器之前,自定义视图所需的模板已准备就绪。可通过在 onTemplatesReady 事件的处理器中创建自定义视图。该事件会在所有模板处理完成后触发:
scheduler.attachEvent("onTemplatesReady",function(){
// 在这里放置自定义视图的创建代码
});
scheduler.init(container, date, "custom view name");
返回顶部