DayPilot Scheduler can be exported in PNG format using the client-side API.


You can export the Scheduler using .exportAs() method:

DayPilot.Scheduler.exportAs(format, options);


  • format (string) - export format, use "PNG" for PNG export
  • options (object) - additional export options; see below

Return value

  • The exportAs() method returns an Export object which lets you access the exported image.

Export options

You can specify additional export options using the "options" parameter:

  • options.area - specifies the exported area ("viewport", "full" or "range")
  • options.dateFrom - start date (for "range" area)
  • options.dateTo - end date (for "range" area)
  • options.resourceFrom - start resource (for "range" area)
  • options.resourceTo - end resource (for "range" area)
  • options.scale - scale factor used for the exported image (default value is 1)

Export object

  • toElement() - returns a Canvas element with the image
  • toHtml() - returns an HTML string with <img> tag and the image specified using src attribute (in dataURI format)
  • toDataUri() - returns a dataURI string
  • toBlob() - returns a Blob object
  • download(name) - forces download of the image (not supported in IE versions before IE 10)
  • print() - prints the exported image using the browser


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

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

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

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

<script type="text/javascript">

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

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