Exporting in TypeScript Scheduler

Scheduler supports exporting appointments to either Excel or ICS files on the client side. It provides client-side methods to export appointment data in Excel or iCal format. Let’s explore how to implement exporting functionality in Scheduler.

Excel Exporting

Use the exportToExcel client-side method to export all Scheduler events to an Excel file. By default, it exports the fields mapped through the eventSettings property.

To use Excel export, import and inject the ExcelExport module from the @syncfusion/ej2-schedule package using the Schedule.Inject method.

Exporting with custom fields

By default, Scheduler exports all default event fields mapped through the eventSettings property. To limit the number of fields in the exported Excel file, you can export only custom fields of the event data. Define the required fields through the eventSettings interface and pass it as an argument to the exportToExcel method. For example: ['Id', 'Subject', 'StartTime', 'EndTime', 'Location'].

Exporting individual occurrences of a recurring series

By default, the Scheduler exports recurring events as a single data by exporting only its parent record into the excel file. If you want to export each individual occurrences of a recurring series appointment as separate records in an Excel file, define the includeOccurrences option as true through the ExportOptions interface and pass it as argument to the exportToExcel method. By default, the includeOccurrences option is set to false.

Exporting custom event data

By default, the entire event collection bound to the Scheduler is exported as an Excel file. To export only specific events or a custom event collection, pass the custom data collection using the customData option of the ExportOptions interface to the exportToExcel method.

By default, event data is taken from the Scheduler dataSource.

Customizing column header with custom fields exporting

To customize the header of custom fields during export, use the fieldsInfo option through the ExportFieldInfo interface and pass it as an argument to the exportToExcel method.

Export with custom file name

By default, the Scheduler downloads the exported Excel file with the name Schedule.xlsx. To export the Excel file with a custom file name, define the desired fileName through the ExportOptions interface and pass it as an argument to the exportToExcel method.

Excel file formats

By default, the Scheduler exports event data to an Excel file in the .xlsx format. You can also export the Scheduler data in either .xlsx or .csv formats by defining the exportType option as either csv or xlsx through the ExportOptions interface. The default exportType is xlsx.

Custom separator in CSV

The Scheduler exports event data to CSV format using a comma separator by default. You can change the separator by setting the separator property in ExportOptions.

How to customize the excel sheet on before exporting

You can customize an Excel sheet before export using the excelExport event. This event lets you tailor exported data, apply formatting, and include additional content for better presentation.

Using the excelExport event, you can:

  • Adjust the formatting: Apply specific styles such as font type, size, color, and cell formatting to make the output visually appealing and consistent with your requirements.

  • Customize headers and footers: Personalize the Excel sheet by modifying the header and footer content, offering more control over the exported document.

  • Cancel the export: The event supports cancellation of the export process by setting the cancel property to true. This feature ensures you can prevent export based on specific conditions, offering you full control over the Excel export workflow.

Here’s an example of how you can add a custom header and footer to an Excel sheet before exporting using the excelExport event.

Exporting calendar events as ICS file

You can export Scheduler events to a calendar (.ics) file, compatible with calendars such as Google Calendar and Outlook. To export to ICS, import the ICalendarExport module from @syncfusion/ej2-schedule and inject it with Schedule.Inject(ICalendarExport).

The following code example shows how the Scheduler events are exported to a calendar (.ics) file by making use of the exportToICalendar public method.

Exporting calendar with custom file name

By default, the calendar exports as Calendar.ics. To use a custom file name, pass it as the fileName option to the export method.

The following example downloads the iCal file with a name ScheduleEvents.ics.

Import events from other calendars

Events from external calendars (ICS files) can be imported into Scheduler using the importICalendar method. This method requires a Blob object representing the .ics file.

To import an ICS file containing events into Scheduler, first import the ICalendarImport module from the @syncfusion/ej2-schedule package and then inject it using the Schedule.Inject(ICalendarImport) method.

The following example shows how to import an ICS file into Scheduler, using the importICalendar method.

How to print the Scheduler element

Scheduler supports printing via the print client-side method. It can be used without options or with custom print options.

  • Using the print method without options.
  • Using the print method with options.

To print the Schedule, you need to import the Print module from the @syncfusion/ej2-schedule package and then inject it using the Schedule.Inject(Print) method.

Using print method without options

You can print the Schedule element with the current view by using the print method without passing the options. The following example shows how to print the Scheduler using the print method without passing options.

Using a print method with options

You can print the Schedule element based on your needs using the print method by passing the print options used in this example with its values. The following example shows how to print the Scheduler using the print method by passing the options.

How to customize the print layout

The beforePrint event enables users to customize the print layout of the Scheduler control without altering the actual schedule layout or data. This event returns the HTML element used for printing, which can be tailored based on specific requirements before the print operation is triggered. Additionally, users can prevent the print action by setting the cancel property to true, giving them full control over when and how the print operation takes place.

Key customization options include:

  • Customizing the header and footer: Add custom header and footer content of the print layout to include additional information.
  • Controlling print output: Fine-tune the layout to ensure that only the necessary details are printed, ensuring a clean and structured printout.

Here’s an example of how you can add a custom header and footer to the print layout using the beforePrint event.

You can refer to our JavaScript Scheduler feature tour page for its groundbreaking feature representations. You can also explore our JavaScript Scheduler example to learn how to present and manipulate data.