New to Kendo UI for Vue? Start a free 30-day trial

PDF Export

The Scheduler enables you to export its content to PDF.


To export the content of the Scheduler to PDF:

  1. Include the pdf option to the toolbar of the Scheduler.
  2. Configure the export settings through the pdf attribute.

You can specify the file name and whether to export all pages, margins, paper size, font, and so on.

View Source
Edit In Stackblitz  
Change Theme:


To modify the content of the exported PDF file, use CSS rules. When the user clicks the Export button, the page creates an individual element. Then it applies the CSS rules to that element and the files and the styling settings are exported.

/* Hide toolbar, navigation and footer during export */
.k-pdf-export .k-scheduler-toolbar,
.k-pdf-export .k-scheduler-navigation .k-nav-today,
.k-pdf-export .k-scheduler-navigation .k-nav-prev,
.k-pdf-export .k-scheduler-navigation .k-nav-next,
.k-pdf-export .k-scheduler-footer
	display: none;

If you load the Kendo UI stylesheets from an external sourcefor example, from CDNimport the fonts in the same manner as the following snippet imports the DejaVu Sans font.

	"DejaVu Sans"             : "",
	"DejaVu Sans|Bold"        : "",
	"DejaVu Sans|Bold|Italic" : "",
	"DejaVu Sans|Italic"      : "",
	"WebComponentsIcons"      : ""

To enable compression in the PDF output, load the pako zip library (pako_deflate.min.js) from CDN. This approach improves the performance of the Scheduler and increases the size of the content that can be exported.

<script src=""></script>

For more information on how to implement the PDF Export button, customize the Scheduler by hiding its toolbar with CSS, and using the Pako library, refer to the runnable StackBlitz example.

In this article

Not finding the help you need?