DayPilot Scheduler can be exported in SVG format using the client-side API. The SVG format has many advantages over JPEG or PNG:

  • SVG is a vector format - the exported image can be resized as needed without the loss of image quality.

  • It's good for direct printing.

  • The SVG file usually has a smaller size.

  • You can embed it in more complex SVG objects.

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]);

To export the Scheduler to SVG you need to specify "svg" as the format parameter:

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

The exportAs() method returns a DayPilot.Export object that lets you work with the exported object.

You can print it directly:

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

You can get the SVG source:

var dp.exportAs("svg").toHtml();

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