Client-Side Excel Export

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

Available since 2026.1.6835.

Live Demo

• JavaScript Calendar: Export to Excel (Demo)

Supported Features

• Customization of background and font colors (days of week, cells, events)

• Minimum cell height

• Overlapping events

• Events spanning multiple days

Dependencies

The Month component 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.

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="month"></div>

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

<script>

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

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

</script>

Exported Area

The default exports the full loaded grid. Use area: "range", dateFrom and dateTo to export complete displayed weeks intersecting a half-open date interval. dateTo is excluded. The export respects weekStarts and hidden weekends; it does not generate weeks outside the loaded grid.

month.exportAs("xlsx", {
  area: "range",
  dateFrom: "2028-04-10",
  dateTo: "2028-04-24"
}).download("schedule.xlsx");

With Sunday as the week start and weekends visible, this range includes April 9–29, 2028. A range containing only hidden weekend days can yield no exported week.

Overlapping Events

Overlapping events are supported. The cell height is extended automatically.

Word Wrap

Not implemented.

Adjusting Dimensions

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

The Month component 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:

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

Custom height conversion function:

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

Event Appearance

The following properties can be configued using onBeforeEventRender or onBeforeEventExport:

• backColor

• borderColor

• fontColor

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

Output

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

const blob = await month.exportAs("xlsx").toBlobAsync();

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

month.exportAs("xlsx").download("month.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:

month.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 Month component representation in the output xlsx file.

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

• Active areas

• Duration bar

• Custom HTML

• CSS (rounded corners, transparency, transformations…)

Angular

Provide the imported ExcelJS namespace in the typed configuration, then call the range export from a button handler after initialization.

config: DayPilot.MonthConfig = {exceljs: ExcelJS};

exportRange() {
  this.month.control.exportAs("xlsx", {
    area: "range", dateFrom: "2028-04-10", dateTo: "2028-04-24"
  }).download("schedule.xlsx");
}

<daypilot-month [config]="config" #month></daypilot-month>

Declare @ViewChild("month") month!: DayPilotMonthComponent; in the existing component.

React

const month = useRef(null);
function exportRange() {
  month.current.exportAs("xlsx", {
    area: "range", dateFrom: "2028-04-10", dateTo: "2028-04-24"
  }).download("schedule.xlsx");
}

<DayPilotMonth exceljs={ExcelJS}
  controlRef={control => { month.current = control; }} />

Vue

<script setup>
import {ref} from "vue";
import * as ExcelJS from "exceljs";
const month = ref(null);
function exportRange() {
  month.value.control.exportAs("xlsx", {
    area: "range", dateFrom: "2028-04-10", dateTo: "2028-04-24"
  }).download("schedule.xlsx");
}
</script>

<template>
  <DayPilotMonth ref="month" :exceljs="ExcelJS" />
</template>

Angular and React examples use an import * as ExcelJS from "exceljs" import. Keep the existing Month date and event props; invoke the export function from an application button.