How to add a custom tab next to the timeline?


I’ve been playing with adding another “button” next to the [TIMELINE] called [API].

<div class="dhx_cal_tab" name="api_tab" style="right:280px;"></div>

This placed after the [TIMELINE] works great, but now I want to do something with it, like provide a link to an API call, as I want to show my customers they can tap into the data source for the timeline, using Excel, etc.

Is this possible please?


To add some functionality to your custom button, you can use onBeforeViewChange event with the required mode that you specified at your custom button: ;
For example:

<div class="dhx_cal_tab" data-tab="Help"></div>

Then, onBeforeViewChange handler will look like:

scheduler.attachEvent("onBeforeViewChange", function(old_mode,old_date,mode,date){
    if(mode == "Help"){
        alert("custom tab click");
        return false;// prevent view change on custom button click
    return true;

Please check the following snippet: ;
Note that I’ve use data-tab attribute in the tab element – this will only work in dhtmlxScheduler v6.0. If you use dhtmlxScheduler 5.3 or earlier – you’ll need to use the name attribute:

<div class="dhx_cal_tab" name="Help_tab"></div>

Also, you can change the scheduler.config.header by adding your custom button with the following syntax:

scheduler.config.header = [
    {html:"click me!", click:function(){alert("done!")}},

Here related article: ;
Please check the example with custom button which directs you to another website:


Thank you team. That worked!

However, I also managed to achieve the same by combining two CSS into one HTML line, using your custom button class

<div class="dhx_custom_button dhx_cal_tab" name="data_tab">SHOW DATA</div>

This I hooked to a JS function:

        scheduler._click["dhx_custom_button"] = function () {
  "", "_blank");

But I think I prefer your config header method. Thanks