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

Note that JPEG is not the optimal export format. The nature of the exported image (rectangular shapes, blocks of uniform colors) makes it work much better with PNG. The same image exported as PNG usually has about 50% smaller size and better image quality (PNG uses lossless compression).

JavaScript

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

DayPilot.Scheduler.exportAs(format, options);

Parameters

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

Return value

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

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)
  • options.quality - quality of the exported JPEG image (default value is 0.92)

Export object

  • toElement() - returns Canvas element with the image
  • toHtml() - returns HTML with <img> tag and the image specified using src attribute (in dataURI format)
  • toDataUri() - returns dateURI string
  • toBlob() - returns 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("jpeg", {area: area}).toElement();
            $("#export").html('').append(element);
        });
        $("#download-button").click(function(ev) {
            ev.preventDefault();
            var area = $("#area").val();
            dp.exportAs("jpeg", {area: area}).download();
        });
    });


</script>

Demo