带有过滤器的 DHTMLX 调度程序自定义年份视图
DHTMLX Sceduler Custom Year view with filter
我已将 4 个自定义标签(选项卡)添加到调度程序,如下所示:
<div class="dhx_cal_tab a-tab" name="A_tab" style="right:50px;"></div>
<div class="dhx_cal_tab b-tab" name="B_tab" style="right:50px;"></div>
<div class="dhx_cal_tab c-tab" name="C_tab" style="right:50px;"></div>
<div class="dhx_cal_tab d-tab" name="D_tab" style="right:50px;"></div>
并像这样吸引他们:
scheduler.locale.labels.A_tab = "A"
scheduler.locale.labels.B_tab = "B"
scheduler.locale.labels.C_tab = "C"
scheduler.locale.labels.D_tab = "D"
它们在header中是这样的:
我想要做的是能够单击这些按钮中的每一个,这将显示年视图,其中仅包含具有 属性 的事件,假设 A、B 中的 type
, C 或 D - 取决于在年视图中 select 编辑了哪个视图。
以下是我的第一次尝试:
scheduler.attachEvent("onTemplatesReady",function(){
scheduler.date.A_start = scheduler.date.B_start = scheduler.date.C_start = scheduler.date.D_start = function(e){return e.setMonth(0),this.month_start(e)};
scheduler.date.get_A_end = scheduler.date.add_B = scheduler.date.add_C = scheduler.date.add_D = function(date,inc){
return scheduler.date.add(date,inc*1,"year");
}
scheduler.date.add_A = scheduler.date.add_B = scheduler.date.add_C = scheduler.date.add_D = function(start_date){
return scheduler.date.add(start_date,1,"year");
}
scheduler.templates.A_date = scheduler.templates.B_date = scheduler.templates.C_date = scheduler.templates.D_date = scheduler.templates.year_date;
scheduler.templates.A_scale_date = scheduler.templates.B_scale_date = scheduler.templates.C_scale_date = scheduler.templates.D_scale_date = scheduler.templates.year_scale_date;
scheduler.filter_year = function(id, event) {
// display event only if its type is set to the mode of the
if (event.type=== scheduler.getState().mode) {
return true;
}
// default, do not display event
return false;
};
});
但是,当我 运行 单击其中一个选项卡时,我得到以下信息:
这里有3个问题:
- 该视图看起来是月视图的克隆,而不是年视图
- 过滤器显然不起作用,因为正在显示所有事件(我只想要 B 类事件(与 Tab 颜色相同)
- A 选项卡显示与其他选项卡不同的视图:
我忘记了简单吗?感谢任何 运行ning 提供此视图的帮助!
我还知道我可以将过滤器的控件移到调度程序之外 我真的很想将选项卡保留在调度程序中,因为整体外观最好,而不是单独的 select。
年视图没有构造方法,因此每个调度程序只能有一个 year-view。
它也不能通过日期函数实现,它们只定义 daily-views https://docs.dhtmlx.com/scheduler/custom_views.html#stepbystepexample
你能做的是
- 向 header 添加标签,就像您已经做的那样
- 更改选项卡行为 - 您可以设置 filter_year 并将调度程序切换到 "year" 模式,而不是切换到自定义视图,这应该可以满足您的需要 - 您将在其中过滤任务年视图。
这是一个工作演示:
http://snippet.dhtmlx.com/aa08a8249
我已将 4 个自定义标签(选项卡)添加到调度程序,如下所示:
<div class="dhx_cal_tab a-tab" name="A_tab" style="right:50px;"></div>
<div class="dhx_cal_tab b-tab" name="B_tab" style="right:50px;"></div>
<div class="dhx_cal_tab c-tab" name="C_tab" style="right:50px;"></div>
<div class="dhx_cal_tab d-tab" name="D_tab" style="right:50px;"></div>
并像这样吸引他们:
scheduler.locale.labels.A_tab = "A"
scheduler.locale.labels.B_tab = "B"
scheduler.locale.labels.C_tab = "C"
scheduler.locale.labels.D_tab = "D"
它们在header中是这样的:
我想要做的是能够单击这些按钮中的每一个,这将显示年视图,其中仅包含具有 属性 的事件,假设 A、B 中的 type
, C 或 D - 取决于在年视图中 select 编辑了哪个视图。
以下是我的第一次尝试:
scheduler.attachEvent("onTemplatesReady",function(){
scheduler.date.A_start = scheduler.date.B_start = scheduler.date.C_start = scheduler.date.D_start = function(e){return e.setMonth(0),this.month_start(e)};
scheduler.date.get_A_end = scheduler.date.add_B = scheduler.date.add_C = scheduler.date.add_D = function(date,inc){
return scheduler.date.add(date,inc*1,"year");
}
scheduler.date.add_A = scheduler.date.add_B = scheduler.date.add_C = scheduler.date.add_D = function(start_date){
return scheduler.date.add(start_date,1,"year");
}
scheduler.templates.A_date = scheduler.templates.B_date = scheduler.templates.C_date = scheduler.templates.D_date = scheduler.templates.year_date;
scheduler.templates.A_scale_date = scheduler.templates.B_scale_date = scheduler.templates.C_scale_date = scheduler.templates.D_scale_date = scheduler.templates.year_scale_date;
scheduler.filter_year = function(id, event) {
// display event only if its type is set to the mode of the
if (event.type=== scheduler.getState().mode) {
return true;
}
// default, do not display event
return false;
};
});
但是,当我 运行 单击其中一个选项卡时,我得到以下信息:
这里有3个问题:
- 该视图看起来是月视图的克隆,而不是年视图
- 过滤器显然不起作用,因为正在显示所有事件(我只想要 B 类事件(与 Tab 颜色相同)
- A 选项卡显示与其他选项卡不同的视图:
我忘记了简单吗?感谢任何 运行ning 提供此视图的帮助!
我还知道我可以将过滤器的控件移到调度程序之外 我真的很想将选项卡保留在调度程序中,因为整体外观最好,而不是单独的 select。
年视图没有构造方法,因此每个调度程序只能有一个 year-view。 它也不能通过日期函数实现,它们只定义 daily-views https://docs.dhtmlx.com/scheduler/custom_views.html#stepbystepexample
你能做的是
- 向 header 添加标签,就像您已经做的那样
- 更改选项卡行为 - 您可以设置 filter_year 并将调度程序切换到 "year" 模式,而不是切换到自定义视图,这应该可以满足您的需要 - 您将在其中过滤任务年视图。
这是一个工作演示: http://snippet.dhtmlx.com/aa08a8249