Client-Side PNG Export

DayPilot Scheduler can be exported to a PNG image using the client-side API.

JavaScript

You can export the Scheduler to PNG using exportAs() method:

DayPilot.Scheduler.exportAs(format[, options]);

To export the Scheduler to PNG use "png" as the first parameter:

var ex = dp.exportAs("png");

You can use the options parameter specify additional export properties, such as the exported area:

var ex = dp.exportAs("png", { area: "full" });

The exportAs() method returns a DayPilot.Export object that you can use to download the image, open the print dialog or convert it to Blob or data URI.

Open a print dialog:

dp.exportAs("png").print();

Download the image:

dp.exportAs("png").download("image.png");

Get the image as a data URI:

var dataUri = dp.exportAs("png").toDataUri();

Example

<div id="dp"></div>

<div class="space">
    Area:
    <select id="area">
        <option value="viewport">Viewport</option>
        <option value="full">Full</option>
    </select>

</div>
<div class="space">
    <a href="#" id="export-button">Export</a>
    <a href="#" id="download-button">Download</a>
</div>

<div id="export"></div>

<script type="text/javascript">

    var dp = new DayPilot.Scheduler("dp");
    
    // config ...

    dp.init();
    
    $(document).ready(function() {
        $("#export-button").click(function(ev) {
            ev.preventDefault();
            var area = $("#area").val();
            var element = dp.exportAs("png", {area: area}).toElement();
            $("#export").html('').append(element);
        });
        $("#download-button").click(function(ev) {
            ev.preventDefault();
            var area = $("#area").val();
            dp.exportAs("png", {area: area}).download();
        });
    });


</script>

Demo

• JavaScript Scheduler PNG Export Demo