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 the exportAs() method:

DayPilot.Scheduler.exportAs(format[, options]);

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

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

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

You can print it directly:

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

You can get the SVG source:

const svg = 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">

    const 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