Custom print button on navigation bar

Scheduler ASP.NET MVC
#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.

#4

Hello,

I added code to actually implement printing as follows:

Made a copy of the https://export.dhtmlx.com/scheduler/api.js in scheduler-api.js

In the controller class:

        model.scheduler.Extensions.Add("./scheduler-api.js");
        model.scheduler.Extensions.Add("../scheduler-init.js");

In the scheduler-init.js:

(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 () {
            var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
            var s = scheduler.getState();
            var monthLabel = months[s.date.getMonth()] + ', ' + s.date.getFullYear();
            scheduler.exportToPDF({
                name: 'calendar-' + s.date.getMonth() + '-' + s.date.getFullYear() + '.pdf',
                format: 'A4',
                orientation: 'landscape',
                zoom: 1,
                header: '<h2>Lake County Fairgrounds Reservations for ' + monthLabel + '</h2>'
            });

        };
        var div = document.createElement("div");
        div.style = "left: 292px; right: auto;";
        div.appendChild(button);

        navBar.appendChild(div);
    });
})();

Unfortunately, generated PDF file does not render correctly (looks like the styles are not being used). How can I correctly render PDF file using DHTMLX styles? Many thanks in advance.

calendar-1-2020 (4).pdf (20.4 KB)

#5

Hello @c9482,

I tried to reproduce the issue with your “print” input, and with some different “export configurations” but it worked correctly.

Here is a demo:
http://snippet.dhtmlx.com/5/ec842051b

As a quick fix, you can try to add styles in the “header” parameter of the export function:

scheduler.exportToPDF({
    header:'<link rel="stylesheet" type="text/css" href="https://docs.dhtmlx.com/scheduler/codebase/dhtmlxscheduler.css">',
});

(you can check it in the demo above)

If it won’t help, could you please send me a kind of a demo, which I could run locally and where a will be able to reproduce the issue?

API Custom style for the output file
https://docs.dhtmlx.com/scheduler/pdf.html#customstylefortheoutputfile

#6

Hello @Siarhei,

Your workaround worked beautifully! Thank you very much.