Client-Side Excel Export

The JavaScript Calendar component supports client-side export to an Excel spreadsheet (xlsx format).

Available since 2026.1.6815.

Live Demo

• JavaScript Calendar: Export to Excel (Demo)

Supported Features

• Customization of background and font colors (time headers, row headers, cells, events, upper-left corner)

• All-day events

• Resources view (including column header hierarchy)

• Automatic and fixed column width

Dependencies

The Calendar uses ExcelJS library (MIT license) to generate the Excel spreadsheet.

ExcelJS is not bundled: The reference to ExcelJS must be provided using the exceljs property of the Calendar.

Quick Example

Configuration:

• Set the ExcelJS reference using the exceljs property

Export:

• Call the exportAs() method to get the export object: exportAs("xlsx")

• The export object supports direct download using download("file.xlsx") or async BLOB access using toBlobAsync().

<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.4.0/exceljs.min.js"></script>

<div id="calendar"></div>

<button id="export">Export</button>

<script>

  const calendar = new DayPilot.Calendar("calendar", {    
    exceljs: ExcelJS,
    onBeforeEventExport: args => {
      args.data.backColor = "#6aa84f";
      args.data.fontColor = "#ffffff";
      args.data.borderColor = "#3d6f3d";
    },
    // ...
  });
  calendar.init();

  const app = {
      init() {
          this.bindEvents();
      },
      bindEvents() {
          document.getElementById('export').addEventListener('click', (ev) => {
              const options = {
                  mime: "application/octet-stream",
                  area: "full",
              };
              calendar.exportAs("xlsx", options).download("calendar.xlsx");
          });
      }
  };
  app.init();

</script>

Exported Area

At this moment, the Calendar only supports full grid export.

Overlapping Events

If there are concurrent events, only the first event will be included in the export Excel sheet.

Adjusting Dimensions

Excel uses its own units for column widths and row heights.

The Calendar translates the pixel measures to the Excel units. The output should roughly correspond to the dimensions displayed in the browser.

You can also provide custom unit conversion calculations:

• to better adjust the dimensions to the target environment

• to scale up/down

Custom width conversion function:

calendar.exportAs("xlsx", {
  transformWidth: width => (width - 5) / 7
}).download();

Custom height conversion function:

calendar.exportAs("xlsx", {
  transformWidth: height => height * 0.75
}).download();

Event Appearance

The following properties can be configued using onBeforeEventRender or onBeforeEventExport:

• backColor

• borderColor

• fontColor

If the text includes a line break (\n), the Calendar will enable word wrap for the target spreadsheet cell and the line break will be exported.

The colors must be in hex format (e.g., "#ffffff").

Output

You can export the XLSX file as a Blob using the getBlobAsync() method:

const blob = await calendar.exportAs("xlsx").getBlobAsync();

You can also directly invoke the download using the download() method:

calendar.exportAs("xlsx").download("calendar.xlsx");

The default MIME type of the output is application/vnd.openxmlformats-officedocument.spreadsheetml.sheet. If needed (e.g., in Salesforce LWC), you can set custom MIME type using the mime property:

calendar.exportAs("xlsx", {
  mime: "application/octet-stream"
}).download();

Limitations

Spreadsheets have only a single layer and all elements needs to match the grid. That limits the Calendar representation in the output xlsx file.

Features that rely on multiple layers and more complex layout are not supported, including:

• Event boxes that are not aligned to the grid (useEventBoxes values other than "Always")

• Concurrent events

• Active areas

• Duration bar

• Custom HTML

• CSS (rounded corners, transparency, transformations…)