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

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

  • SVG is a vector format - the exported image can be resized as needed without the loss of image quality.
  • The exported SVG image dimensions are specified using viewBox attribute. This allows automatic scaling of the image by setting width and height styles on the SVG element.

JavaScript

You can export the Scheduler to SVG image using .export() method:

DayPilot.Scheduler.exportAs(format, options);

Parameters

  • format (string) - export format, use "SVG" for SVG 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)

Export object

  • toElement() - returns SVG DOM element with the image
  • toHtml() - returns <svg> tag source
  • toDataUri() - returns dataURI 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("svg", {area: area}).toElement();
            $("#export").html('').append(element);
        });
        $("#download-button").click(function(ev) {
            ev.preventDefault();
            var area = $("#area").val();
            dp.exportAs("svg", {area: area}).download();
        });
    });


</script>

Demo