html5-scheduler-client-side-png-export.png

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

JavaScript

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

DayPilot.Scheduler.exportAs(format, options);

Parameters

  • 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

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