а

Custom print button on navigation bar


#1

Hello,

I am trying to add a custom button to calendar navigation bar (print button). I looked at this post Custom Navigation buttons but it was not quite helpful in what I am trying to achieve. I understand how to control the appropriate click event handler just not sure how to add the button. Many thanks in advance for any hints.


#2

Hi,

Since it’s going to be a custom button and not a view tab, I think you’ll need to inject it into the header via javascript code,
for example:

(function () {
    scheduler.attachEvent("onSchedulerReady", function () {
        var navBar = scheduler.$container.querySelector(".dhx_cal_navline");

        var button = document.createElement("input");
        button.type = "button";
        button.value = "Print";
        button.classList.add("scheduler-print-button");
        button.onclick = function () {
            alert("print");
        };
        navBar.appendChild(button);
    });
})();

Here is a complete demo:
https://files.dhtmlx.com/30d/2107abe50e850d6c0650e3e46868205e/CustomHeaderButton.zip


#3

Got it, thank you very much for your help.