Starting from version 4.1, dhtmlxScheduler provides an online export service that gives you the possibility to export the scheduler to the PNG format.
The service is free, but the output PNG file will contain the library's watermark under the GPL license. In case you buy a license, the result of export will be available without a watermark during the valid support period (12 months for all PRO licenses).
There are several export services available. You can install them on your computer and export Scheduler to PNG 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 the scheduler as a PNG image, do the following steps:
<script src="codebase/dhtmlxscheduler.js"></script>
<script src="https://export.dhtmlx.com/scheduler/api.js"></script> <link rel="stylesheet" href="codebase/dhtmlxscheduler.css" type="text/css">
<input value="Export to PNG" type="button" onclick='scheduler.exportToPNG()'>
<script> scheduler.init('scheduler_here',new Date(2019,5,30),"month");
scheduler.load("data/events");
</script>
Related sample: Export to PDF/PNG
The exportToPNG() method takes as a parameter an object with a number of properties (all the properties are optional):
name | (string) the name of the output file |
format | ('A0', 'A1', 'A2', 'A3', 'A4', 'A5') the format of the output PNG image/td> |
orientation | ('portrait', 'landscape') sets the orientation of the output PNG image |
zoom | (number) sets the zoom coefficient of the output PNG image |
header | (string) specifies the header that will be added to the output PNG image. Note, you can use any HTML here |
footer | (string) specifies the footer that will be added to the output PNG image. Note, you can use any HTML here |
server | (string) sets the API endpoint for the request. Can be used with the local install of the export service. The default value is https://export.dhtmlx.com/scheduler |
Calling the export method with optional properties
scheduler.exportToPNG({
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 exportToPNG method:
scheduler.exportToPNG({
name:"my_beautiful_scheduler.png"});
To add the header/footer to the output PNG file, use the header/footer properties in the exportToPNG method:
Note, you can use any HTML while specifying the parameters. While specifying images, remember that you need to set global paths as values of the "src" attribute
scheduler.exportToPNG({
name:"myscheduler.png",
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:
scheduler.exportToPNG({
name:"calendar.png",
header:'<link rel="stylesheet" href="http://mysite.com/custom.css">' });
scheduler.exportToPNG({
name:"calendar.png",
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.exportToPNG({
header:"<style>.tier1{ background: red; color:white;}</style>"
});
Back to top