Exporting in ASP.NET MVC Scheduler
The Scheduler supports exporting all its appointments both to an Excel or ICS extension file at client-side. It offers different client-side methods to export its appointments in an Excel or ICal format file. Let’s look at how to implement the exporting functionality in the Scheduler.
Excel Exporting
The Scheduler allows you to export all its events into an Excel format file by using the exportToExcel client-side method. By default, it exports all the default fields of Scheduler mapped through EventSettings property.
NOTE
Before you start with excel exporting functionality, you need to import and inject the
ExcelExportmodule from the'@syncfusion/ej2-schedule'package using theInjectmethod of Scheduler.
Exporting with custom fields
By default, the Scheduler exports the event fields that are mapped to it through the EventSettings property. To limit the number of fields in the exported Excel file, you can export only the custom fields of the event data. To export such custom fields alone, define the required fields and pass it as an argument to the exportToExcel method as shown in the following example. For example: ['Id', 'Subject', 'StartTime', 'EndTime', 'Location'].
Exporting individual occurrences of a recurring series
By default, the Scheduler exports recurring events as a single record by exporting only the parent record into the Excel file. If you want to export each individual occurrence of a recurring series appointment as separate records in an Excel file, define the includeOccurrences option as true and pass it as an argument to the exportToExcel method. By default, the includeOccurrences option is set to false.
Exporting custom event data
By default, the whole event collection bound to the Scheduler gets exported as an Excel file. To export only specific events of the Scheduler or some custom event collection, pass that custom data collection as a parameter to the exportToExcel method through the customData option, as shown in the following example.
NOTE
By default, the event data are taken from Scheduler dataSource.
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 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 as either .xlsx or .csv by defining the exportType option as either csv or xlsx. By default, the exportType is set to xlsx.
Custom separator in CSV
The Scheduler exports the event data to CSV format with , as the separator. You can change the separator by setting the separator property in ExportOptions.
@using Syncfusion.EJ2.Schedule
@(Html.EJS().Schedule("schedule")
.Width("100%")
.Height("650px")
.Views(ViewBag.view)
.ActionBegin("onActionBegin")
.EventSettings(new ScheduleEventSettings {
dataSource: [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2022, 0, 8, 9, 30),
EndTime: new Date(2022, 0, 8, 11, 0),
Location: 'Chennai',
OwnerId: 1
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2022, 0, 10, 12, 0),
EndTime: new Date(2022, 0, 10, 14, 0),
Location: 'Mumbai',
OwnerId: 2
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2022, 0, 13, 9, 30),
EndTime: new Date(2022, 0, 13, 11, 0),
Location: 'Mumbai',
OwnerId: 3
},
]
})
.SelectedDate(new DateTime(2022, 2, 15))
.Render()
)
<script type="text/javascript">
function onActionBegin(args) {
if (args.requestType === 'toolbarItemRendering') {
var exportItem = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
text: 'Excel Export', cssClass: 'e-excel-export', click: onExportClick
};
args.items.push(exportItem);
}
}
function onExportClick() {
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
var exportValues = { exportType: 'csv', separator: ';' };
scheduleObj.exportToExcel(exportValues);
}
</script>public ActionResult Index()
{
ViewBag.datasource = GetScheduleData();
List<ScheduleView> viewOption = new List<ScheduleView>()
{
new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Week }
};
ViewBag.view = viewOption;
return View();
}
public List<AppointmentData> GetScheduleData()
{
List<AppointmentData> appData = new List<AppointmentData>();
appData.Add(new AppointmentData
{ Id = 1, Subject = "Explosion of Betelgeuse Star", Location = "Dallas", StartTime = new DateTime(2022, 2, 8, 9, 30, 0), EndTime = new DateTime(2022, 2, 8, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 2, Subject = "Thule Air Crash Report", Location = "Texas", StartTime = new DateTime(2022, 2, 9, 12, 0, 0), EndTime = new DateTime(2022, 2, 9, 14, 0, 0) });
appData.Add(new AppointmentData
{ Id = 3, Subject = "Blue Moon Eclipse", Location = "Australia", StartTime = new DateTime(2022, 2, 10, 10, 30, 0), EndTime = new DateTime(2022, 2, 10, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 4, Subject = "Meteor Showers in 2019", Location = "Canada", StartTime = new DateTime(2022, 2, 11, 13, 0, 0), EndTime = new DateTime(2022, 2, 11, 14, 30, 0) });
appData.Add(new AppointmentData
{ Id = 5, Subject = "Milky Way as Melting pot", Location = "Mexico", StartTime = new DateTime(2022, 2, 12, 12, 0, 0), EndTime = new DateTime(2022, 2, 12, 14, 0, 0) });
return appData;
}
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public string Location { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
}How to customize the excel sheet on before exporting
Customizing an Excel sheet before export is made easy with the excelExport API. This API provides users with robust flexibility to tailor the exported data, format it according to specific needs, and include additional elements for enhanced presentation.
With the excelExport API, 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 API supports cancellation of the export process by setting the
cancelproperty totrue. 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 API:
@using Syncfusion.EJ2.Schedule
@{
var views = new List<string> { "Day", "Week", "WorkWeek", "Month", "Year", "Agenda", "MonthAgenda", "TimelineDay", "TimelineWeek", "TimelineWorkWeek", "TimelineMonth", "TimelineYear" };
}
<ejs-schedule id="schedule" width="100%" height="550px" selectedDate="new DateTime(2025, 2, 15)" currentView="Week" tooltipOpen="onTooltipOpen">
<e-schedule-views>
@foreach (var view in views)
{
<e-schedule-view option="@view"></e-schedule-view>
}
</e-schedule-views>
<e-schedule-eventsettings dataSource="@ViewBag.datasource" enableTooltip="true">
<e-schedule-eventsettings-fields>
<e-field name="Subject" title="Name"></e-field>
<e-field name="Location" title="Country Name"></e-field>
<e-field name="Description" title="Summary"></e-field>
<e-field name="StartTime" title="From"></e-field>
<e-field name="EndTime" title="To"></e-field>
<e-field name="StartTimezone" title="Origin"></e-field>
<e-field name="EndTimezone" title="Destination"></e-field>
</e-schedule-eventsettings-fields>
</e-schedule-eventsettings>
</ejs-schedule>
<script type="text/javascript">
function onTooltipOpen(args) {
let record = args.data;
if (record.Subject === 'Vacation') {
args.cancel = true;
}
}
</script>public ActionResult Index()
{
ViewBag.datasource = GetScheduleData();
List<ScheduleView> viewOption = new List<ScheduleView>()
{
new ScheduleView { Option = Syncfusion.EJ2.Schedule.View.Week }
};
ViewBag.view = viewOption;
return View();
}
public List<AppointmentData> GetScheduleData()
{
List<AppointmentData> appData = new List<AppointmentData>();
appData.Add(new AppointmentData
{ Id = 1, Subject = "Explosion of Betelgeuse Star", Location = "Dallas", StartTime = new DateTime(2025, 2, 8, 9, 30, 0), EndTime = new DateTime(2025, 2, 8, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 2, Subject = "Thule Air Crash Report", Location = "Texas", StartTime = new DateTime(2025, 2, 9, 12, 0, 0), EndTime = new DateTime(2025, 2, 9, 14, 0, 0) });
appData.Add(new AppointmentData
{ Id = 3, Subject = "Blue Moon Eclipse", Location = "Australia", StartTime = new DateTime(2025, 2, 10, 10, 30, 0), EndTime = new DateTime(2025, 2, 10, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 4, Subject = "Meteor Showers in 2025", Location = "Canada", StartTime = new DateTime(2025, 2, 11, 13, 0, 0), EndTime = new DateTime(2025, 2, 11, 14, 30, 0) });
appData.Add(new AppointmentData
{ Id = 5, Subject = "Milky Way as Melting pot", Location = "Mexico", StartTime = new DateTime(2025, 2, 12, 12, 0, 0), EndTime = new DateTime(2025, 2, 12, 14, 0, 0) });
return appData;
}
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public string Location { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
}Exporting calendar events as ICS file
You can export the Scheduler events to a calendar (.ics) file format and open it on any of the other default calendars such as Google Calendar or Microsoft Outlook.
The following code example shows how the Scheduler events are exported to a calendar (.ics) file by making use of the exportToICalendar public method.
Customizing column header with custom fields exporting
Using the fields property, you can export only the defined fields into Excel without customizing the header. You can also customize the header of custom fields while exporting by using the fieldsInfo option through the ExportFieldInfo interface and pass it as an argument to the exportToExcel method, as shown in the following example.
Exporting calendar with custom file name
By default, the calendar is exported with a file name Calendar.ics. To change this file name on export, pass the custom string value as fileName to the method argument so as to get the file downloaded with this provided name.
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 the Scheduler by using the importICalendar method. This method accepts the Blob object of an .ics file to be imported as a mandatory argument.
The following example shows how to import an ICS file into Scheduler, using the importICalendar method.
How to print the Scheduler element
The Scheduler allows you to print the Scheduler element by using the print client-side method. The print method works in two ways:
- Using the
printmethod without options. - Using the
printmethod with options.
Using the print method without options
You can print the Schedule element with the current view by using the print method without passing any options, as shown in the following example.
Using a print method with options
You can print the Schedule element based on your requirements by using the print method and passing print options, as shown in the following example.
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, which gives 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 :
NOTE
You can refer to our ASP.NET MVC Scheduler feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET MVC Scheduler example to know how to present and manipulate data.