Javascript DHTMLX Sceduler自定义年份视图（带筛选器）

我向调度器添加了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>

它们在标题中显示如下：

我想做的是能够单击这些按钮中的每一个，这将显示一个年视图，其中仅包含一个属性的事件，例如a、B、C或D的

类型

，具体取决于在年视图中选择的视图

以下是我的第一次尝试：

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

但是，当我运行时，单击其中一个选项卡，我会看到以下内容：

这里有三个问题：

该视图看起来是月视图的克隆，而不是年视图

当显示所有事件时，过滤器显然不起作用（我只想要B类型的事件（与选项卡颜色相同）

“A”选项卡显示与其他选项卡不同的视图：

有什么简单的我忘记了吗？任何有助于提升这一观点的跑步者都将不胜感激

---

另外，我知道我可以将过滤器的控件移到计划程序之外。我真的希望将选项卡保留在计划程序中，因为整体外观最好，而不是单独选择。

年度视图没有构造函数方法，因此每个计划程序只能有一个年度视图。 它也不能通过日期函数实现，它们只定义每日视图

你能做的就是

• 将选项卡添加到标题，就像您已经做的那样
• 更改选项卡行为-不切换到自定义视图，您可以设置filter_year并将scheduler切换到“year”模式，这应该可以满足您的需要-您将在year view中筛选任务

下面是一个工作演示：

---

年度视图没有构造函数方法，因此每个计划程序只能有一个年度视图。 它也不能通过日期函数实现，它们只定义每日视图

你能做的就是

• 将选项卡添加到标题，就像您已经做的那样
• 更改选项卡行为-不切换到自定义视图，您可以设置filter_year并将scheduler切换到“year”模式，这应该可以满足您的需要-您将在year 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;
            };
        });