How to add a custom tab next to the timeline?

Scheduler Javascript
#1

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

#2

Hello,
To add some functionality to your custom button, you can use onBeforeViewChange event with the required mode that you specified at your custom button:
https://docs.dhtmlx.com/scheduler/api__scheduler_onbeforeviewchange_event.html ;
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:
https://snippet.dhtmlx.com/bkl6wun9 ;
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 = [
    "day",
    "week",
    "month",
    {html:"click me!", click:function(){alert("done!")}},
    "date",
    "prev",
    "today",
    "next"
];

Here related article:
https://docs.dhtmlx.com/scheduler/api__scheduler_header_config.html ;
Please check the example with custom button which directs you to another website:
https://snippet.dhtmlx.com/1ty4xgo5

1 Like
#3

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:

<script>
        scheduler._click["dhx_custom_button"] = function () {
            window.open("https://mywebsite.com", "_blank");
        }
    </script>

But I think I prefer your config header method. Thanks