javascript - 带过滤器的 DHTMLX Scheduler 自定义年份 View

标签 javascript dhtmlx dhtmlx-scheduler

我已经向调度程序添加了 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>

并像这样将它们 Hook :

 scheduler.locale.labels.A_tab = "A"
 scheduler.locale.labels.B_tab = "B"
 scheduler.locale.labels.C_tab = "C"
 scheduler.locale.labels.D_tab = "D"

它们在标题中看起来像这样:

schedule layou

我想要做的是能够单击这些按钮中的每一个,这将显示一个年 View ,其中仅包含具有属性的事件,例如 A、B、C 或 D 的 type - 取决于在年 View 中选择的 View 。

以下是我的第一次尝试:

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;
            };
        });

但是,当我运行时单击其中一个选项卡时,我得到以下信息:custom view

这里有 3 个问题:

  1. 该 View 看起来是月 View 的克隆,而不是年 View
  2. 过滤器显然不起作用,因为所有事件都被显示(我只想要 B 类型事件(与 Tab 颜色相同)
  3. A 选项卡显示与其他选项卡不同的 View :

A tab showing different view

有什么简单的事情我忘记了吗?任何帮助让此 View 运行的任何帮助都将受到赞赏!

此外,我知道我可以将过滤器的控件移到调度程序之外,我真的很想将选项卡保留在调度程序中,因为整体外观最好,而不是单独选择。

最佳答案

年 View 没有构造方法,因此每个调度程序只能有一个年 View 。 它也不能通过日期函数实现,它们仅定义每日 View https://docs.dhtmlx.com/scheduler/custom_views.html#stepbystepexample

你能做的是

  • 向标题添加选项卡,就像您已经做的那样
  • 更改选项卡行为 - 您可以设置 filter_year 并将调度程序切换为“年”模式,而不是切换到自定义 View ,这应该可以满足您的需要 - 您将在年 View 中过滤任务。

这是一个工作演示: http://snippet.dhtmlx.com/aa08a8249

关于javascript - 带过滤器的 DHTMLX Scheduler 自定义年份 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44650922/

相关文章:

javascript - 对相同数据的不同表示使用react,参数化容器组件渲染

Javascript 修改 URL 并分配 URL,而不使用源作为父级

php - 从 dhtmlx 调度程序中删除 block 区域

javascript - DHTMLX Scheduler 中标题点击的事件处理程序

javascript - 为什么 alert 出现在 document.write 之前?

javascript - 以编程方式添加/删除由 Material ui 生成的类

javascript - DIV 元素游标行为不一致

jquery - OnEventSave 在 dhtmlx 调度程序中多次触发

javascript - DHTMLX 网格过滤器重置后初始化延迟

javascript - Dhtmlx Scheduler 时间线为周末上色