Export to PDF

The article refers to exporting of dhtmlxScheduler 4.1+. If you use dhtmlxScheduler 4.0 or earlier versions, see details here.

Starting from version 4.1, dhtmlxScheduler provides a new approach for exporting the scheduler into the PDF format - an online export service.

There are several export services available. You can install them on your computer and export Scheduler to PDF locally.

Note that export services are not included into the Scheduler package, read the corresponding article to learn the terms of using each of them.

There is a common API endpoint https://export.dhtmlx.com/scheduler which serves for export methods (exportToPDF, exportToPNG, etc.). Max request size is 10 MB.

To export a scheduler as a PDF document, complete the following steps:

• To use the online export service, enable the export_api plugin via the plugins method:

scheduler.plugins({
    export_api: true
});

<script src="codebase/dhtmlxscheduler.js"></script>
<script src="https://export.dhtmlx.com/scheduler/api.js"></script>

• Call the exportToPDF method to export Scheduler:

<input value="Export to PDF" type="button" onclick='scheduler.exportToPDF()'>

Related sample:  Export to PDF/PNG

The exportToPDF() method takes as a parameter an object with a number of properties (all of the properties are optional):

Calling the export method with optional properties

scheduler.exportToPDF({
    name:"myscheduler.pdf",
    format:"A4",
    orientation:"portrait",
    zoom:1,
    header:"<h1>My company</h1>",
    footer:"<h4>Bottom line</h4>",
    server:"https://myapp.com/myexport/scheduler"
});

To set a custom name for the output file, use the name property in the in the parameter of the exportToPDF method:

scheduler.exportToPDF({
    name:"my_beautiful_scheduler.pdf"});

To add a header/footer to the output PDF file, use the header/footer properties in the parameter of the exportToPDF method:

scheduler.exportToPDF({
    name:"myscheduler.pdf",
    header:"<h1>My company</h1>",    footer:"<h4>Bottom line</h4>"});

To apply a custom style for the scheduler, provide the stylesheet with your custom CSS classes:

• through a link:

scheduler.exportToPDF({
    name:"calendar.pdf",
    header:'<link rel="stylesheet" href="http://mysite.com/custom.css">' });

• or through the 'style' tag:

scheduler.exportToPDF({
    name:"calendar.pdf",
    header:'<style>... custom css classes here ...</style>' });

Note, the aforementioned solution works for the global HTTP reference. If you have CSS classes specified in an Intranet/local environment, you can embed all styles as in:

scheduler.exportToPDF({
    header:"<style>.tier1{background: red; color:white;}</style>"
});

While exporting the Scheduler to the PDF format, you should note that export of HTML elements is limited due to their possible insecurity.

There are HTML elements which are not entirely allowed for export, such as <canvas>, <svg>, <script> and images with the src attribute that contains a Base64 image. However, there are safe ways of exporting images in the SVG and Base64 formats:

• you can use an <img> element with the src attribute that contains a URL of the image in the SVG format (suitable for the PNG and JPG formats, doesn't work for the Base64 format), e.g.:

<img src=https://www.svgrepo.com/download/530597/hat.svg>

• you can use style elements, such as background or background-image and specify the url attribute with the link to the image or an image in the Base64 format as its value (suitable for the PNG/JPG/SVG formats)

.red {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABmJLR0QA/wD/AP+gvaeTAAAAB3RJTUUH1ggDCwMADQ4NnwAAAFVJREFUGJWNkMEJADEIBEcbSDkXUnfSgnBVeZ8LSAjiwjyEQXSFEIcHGP9oAi+H0Bymgx9MhxbFdZE2a0s9kTZdw01ZhhYkABSwgmf1Z6r1SNyfFf4BZ+ZUExcNUQUAAAAASUVORK5CYII=") 100%/contain no-repeat;
    display: inline-block;
    width: 32px;
    height: 32px;
}

If you have an export module and you need to export HTML elements that are not supported by our online export server, you can submit a support request to get instructions on the changes you need to make in your module to remove restrictions. However, you should take into account that your server will be vulnerable to XSS-attacks.