DHTMLX Sceduler Custom Year view with filter

I have added 4 custom labels (tabs) to a scheduler like so:

<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>

And have hooked them in like this:

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

They appear like this in the header:

What I want to do is be able to click each of these buttons and this will show a year view with only events with a property, let's say type of either A, B, C or D - depending on which view is selected in year view.

The following is my first attempt:

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

However, when I run click on one of the tabs I get the following:

There are 3 problems here:

1. The view looks to be a clone of the month view, not the year view
2. The filter clearly doesn't work as all events are being shown ( I only want the B type events (same color as Tab)
3. The A tab shows a different view from the rest:

Is there simple I am forgetting? Any help in getting this view up any running is appreciated!

Also I know I could move the control for a filter outside the scheduler I really would like to keep the tabs in the scheduler as the overall appearance is best instead of a separate select.

Year view does not have a constructor method, so there can be only one year-view per scheduler. It also can't be implemented via date functions, they define only daily-views https://docs.dhtmlx.com/scheduler/custom_views.html#stepbystepexample

What you can to do is

• add tabs to the header, as you already did
• change tab behavior - instead of switching to the custom view, you can set filter_year and switch scheduler to "year" mode, which should do what you need - you'll have filtered tasks in year view.

Here is a working demo: http://snippet.dhtmlx.com/aa08a8249