本文适用于 dhtmlxScheduler 6.0 及更早版本。如需了解 dhtmlxScheduler 7.0 及以上版本的详情,请参阅 这里。
议程视图用于显示即将到来的事件列表。
默认情况下,视图左侧的列表会显示从当前日期开始的事件。如需调整此行为,请使用 agenda_start 和 agenda_end 属性。
要在调度器中添加议程视图,请按照以下步骤操作:
1)在页面上启用 Agenda 扩展:
scheduler.plugins({
agenda_view: true
});
2)在调度器的标记中添加视图的标签:
<div id="scheduler_here" class="dhx_cal_container" ...>
<div class="dhx_cal_navline">
...
<div class="dhx_cal_tab" name="agenda_tab" style="right:280px;"></div>
</div>
...
</div>
3)为标签设置显示文本:
//'agenda_tab' 是 div 的名称。默认标签为 'Agenda'
scheduler.locale.labels.agenda_tab = "My Agenda";
议程视图在本地化中包含 3 个标签:
通常,第一个标签会在添加视图标签时设置。只有在应用程序需要本地化为非英文语言时,才需要更改其他标签。
要定义议程视图中显示的日期范围,请使用 agenda_end 和 agenda_start 属性:
//显示从 2019 年 6 月 1 日开始的日期
scheduler.config.agenda_start = new Date(2019, 5, 1);
//显示截止到 2020 年 6 月 1 日的日期
scheduler.config.agenda_end = new Date(2020, 5, 1);
可以通过重定义 scheduler.date.agenda_start() 和 scheduler.date.add_agenda() 函数,在议程视图中启用上一页、下一页和今天按钮。
scheduler.date.agenda_start(date) 返回给定日期显示区间的起始时间。默认情况下,它返回一个固定的日期,因此议程视图不会响应导航按钮的点击。
可以将这些函数重定义为例如返回当前月份的起始时间:
scheduler.date.agenda_start = function(date){
return scheduler.date.month_start(new Date(date));
};
scheduler.date.add_agenda = function(date, inc){
return scheduler.date.add(date, inc, "month");
};
这样,导航按钮即可正常工作。
Related sample: Next/Previous/Today buttons in Agenda view
可以通过 CSS 类自定义议程视图中各列的宽度:
<style>
.dhx_agenda_line div{
width: 300px;
}
.dhx_v_border{
left: 299px;
}
</style>
Related sample: Adjusting width of columns