Contents
- Excel Exporting
- Exporting calendar events as ICS file
- Import events from other calendars
- How to print the Scheduler element
Having trouble getting help?
Contact Support
Contact Support
Exporting in ASP.NET CORE Schedule Component
3 Jan 202424 minutes to read
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 onto the ways on how to implement the exporting functionality in Scheduler.
To get start quickly with ASP.NET Core Scheduler exporting, you can check on this video:
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 <e-schedule-eventsettings> property.
@using Syncfusion.EJ2.Schedule
<ejs-schedule id="schedule" width="100%" height="650px" views="@ViewBag.view" selectedDate="new DateTime(2019, 1, 10)" actionBegin="onActionBegin">
<e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
</ejs-schedule>
<style>
.e-schedule .e-schedule-toolbar .e-icon-schedule-excel-export::before {
content: '\e242';
}
.e-schedule-toolbar .e-toolbar-item.e-today {
display: none !important;
}
</style>
<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];
scheduleObj.exportToExcel();
}
</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(2019, 1, 8, 9, 30, 0), EndTime = new DateTime(2019, 1, 8, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 2, Subject = "Thule Air Crash Report", Location = "Texas", StartTime = new DateTime(2019, 1, 9, 12, 0, 0), EndTime = new DateTime(2019, 1, 9, 14, 0, 0) });
appData.Add(new AppointmentData
{ Id = 3, Subject = "Blue Moon Eclipse", Location = "Australia", StartTime = new DateTime(2019, 1, 10, 10, 30, 0), EndTime = new DateTime(2019, 1, 10, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 4, Subject = "Meteor Showers in 2019", Location = "Canada", StartTime = new DateTime(2019, 1, 11, 13, 0, 0), EndTime = new DateTime(2019, 1, 11, 14, 30, 0) });
appData.Add(new AppointmentData
{ Id = 5, Subject = "Milky Way as Melting pot", Location = "Mexico", StartTime = new DateTime(2019, 1, 12, 12, 0, 0), EndTime = new DateTime(2019, 1, 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 with custom fields
By default, Scheduler exports all the default event fields that are mapped to it through the <e-schedule-eventsettings> property. To limit the number of fields on the exported excel file, it provides an option to export only the custom fields of the event data. To export such custom fields alone, define the required fields and pass it as argument to the exportToExcel method as shown in the following example. For example: ['Id', 'Subject', 'StartTime', 'EndTime', 'Location'].
@using Syncfusion.EJ2.Schedule
<ejs-schedule id="schedule" width="100%" height="650px" views="@ViewBag.view" selectedDate="new DateTime(2019, 1, 10)" actionBegin="onActionBegin">
<e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
</ejs-schedule>
<style>
.e-schedule .e-schedule-toolbar .e-icon-schedule-excel-export::before {
content: '\e242';
}
.e-schedule-toolbar .e-toolbar-item.e-today {
display: none !important;
}
</style>
<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 = {
fields: ['Id', 'Subject', 'StartTime', 'EndTime', 'Location']
};
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(2019, 1, 8, 9, 30, 0), EndTime = new DateTime(2019, 1, 8, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 2, Subject = "Thule Air Crash Report", Location = "Texas", StartTime = new DateTime(2019, 1, 9, 12, 0, 0), EndTime = new DateTime(2019, 1, 9, 14, 0, 0) });
appData.Add(new AppointmentData
{ Id = 3, Subject = "Blue Moon Eclipse", Location = "Australia", StartTime = new DateTime(2019, 1, 10, 10, 30, 0), EndTime = new DateTime(2019, 1, 10, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 4, Subject = "Meteor Showers in 2019", Location = "Canada", StartTime = new DateTime(2019, 1, 11, 13, 0, 0), EndTime = new DateTime(2019, 1, 11, 14, 30, 0) });
appData.Add(new AppointmentData
{ Id = 5, Subject = "Milky Way as Melting pot", Location = "Mexico", StartTime = new DateTime(2019, 1, 12, 12, 0, 0), EndTime = new DateTime(2019, 1, 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 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 and pass it as argument to the exportToExcel method. By default, the includeOccurrences option is set to false.
@using Syncfusion.EJ2.Schedule
<ejs-schedule id="schedule" width="100%" height="650px" views="@ViewBag.view" selectedDate="new DateTime(2019, 1, 10)" actionBegin="onActionBegin">
<e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
</ejs-schedule>
<style>
.e-schedule .e-schedule-toolbar .e-icon-schedule-excel-export::before {
content: '\e242';
}
.e-schedule-toolbar .e-toolbar-item.e-today {
display: none !important;
}
</style>
<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 = { includeOccurrences: true };
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(2019, 1, 8, 9, 30, 0),
EndTime = new DateTime(2019, 1, 8, 11, 0, 0),
RecurrenceRule = "FREQ=DAILY;INTERVAL=1;COUNT=10"
});
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; }
public string RecurrenceRule { get; set; }
}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 Scheduler or some custom event collection, you need to pass those custom data collection as a parameter to the exportToExcel method as shown in this following example, through the customData option.
NOTE
By default, the event data are taken from Scheduler dataSource.
@using Syncfusion.EJ2.Schedule
<ejs-schedule id="schedule" width="100%" height="650px" views="@ViewBag.view" selectedDate="new DateTime(2019, 1, 10)" actionBegin="onActionBegin">
<e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
</ejs-schedule>
<style>
.e-schedule .e-schedule-toolbar .e-icon-schedule-excel-export::before {
content: '\e242';
}
.e-schedule-toolbar .e-toolbar-item.e-today {
display: none !important;
}
</style>
<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 = {
customData: [{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 6, 9, 30),
EndTime: new Date(2019, 0, 6, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
Location: 'Newyork City',
StartTime: new Date(2019, 0, 7, 12, 0),
EndTime: new Date(2019, 0, 7, 14, 0),
CategoryColor: '#357cd2'
}]
};
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(2019, 1, 8, 9, 30, 0), EndTime = new DateTime(2019, 1, 8, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 2, Subject = "Thule Air Crash Report", Location = "Texas", StartTime = new DateTime(2019, 1, 9, 12, 0, 0), EndTime = new DateTime(2019, 1, 9, 14, 0, 0) });
appData.Add(new AppointmentData
{ Id = 3, Subject = "Blue Moon Eclipse", Location = "Australia", StartTime = new DateTime(2019, 1, 10, 10, 30, 0), EndTime = new DateTime(2019, 1, 10, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 4, Subject = "Meteor Showers in 2019", Location = "Canada", StartTime = new DateTime(2019, 1, 11, 13, 0, 0), EndTime = new DateTime(2019, 1, 11, 14, 30, 0) });
appData.Add(new AppointmentData
{ Id = 5, Subject = "Milky Way as Melting pot", Location = "Mexico", StartTime = new DateTime(2019, 1, 12, 12, 0, 0), EndTime = new DateTime(2019, 1, 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; }
}Export with custom file name
By default, the Scheduler allows you to download the exported Excel file with a name Schedule.xlsx. It also provides an option to export the excel file with a custom file name, define the desired fileName and passing it as an argument to the exportToExcel method.
@using Syncfusion.EJ2.Schedule
<ejs-schedule id="schedule" width="100%" height="650px" views="@ViewBag.view" selectedDate="new DateTime(2019, 1, 10)" actionBegin="onActionBegin">
<e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
</ejs-schedule>
<style>
.e-schedule .e-schedule-toolbar .e-icon-schedule-excel-export::before {
content: '\e242';
}
.e-schedule-toolbar .e-toolbar-item.e-today {
display: none !important;
}
</style>
<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 = { fileName: "SchedulerData" };
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(2019, 1, 8, 9, 30, 0), EndTime = new DateTime(2019, 1, 8, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 2, Subject = "Thule Air Crash Report", Location = "Texas", StartTime = new DateTime(2019, 1, 9, 12, 0, 0), EndTime = new DateTime(2019, 1, 9, 14, 0, 0) });
appData.Add(new AppointmentData
{ Id = 3, Subject = "Blue Moon Eclipse", Location = "Australia", StartTime = new DateTime(2019, 1, 10, 10, 30, 0), EndTime = new DateTime(2019, 1, 10, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 4, Subject = "Meteor Showers in 2019", Location = "Canada", StartTime = new DateTime(2019, 1, 11, 13, 0, 0), EndTime = new DateTime(2019, 1, 11, 14, 30, 0) });
appData.Add(new AppointmentData
{ Id = 5, Subject = "Milky Way as Melting pot", Location = "Mexico", StartTime = new DateTime(2019, 1, 12, 12, 0, 0), EndTime = new DateTime(2019, 1, 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; }
}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 of the file type such as .xlsx or csv formats, by defining the exportType option as either csv or xlsx. By default, the exportType is set to xlsx.
@using Syncfusion.EJ2.Schedule
<ejs-schedule id="schedule" width="100%" height="650px" views="@ViewBag.view" selectedDate="new DateTime(2019, 1, 10)" actionBegin="onActionBegin">
<e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
</ejs-schedule>
<style>
.e-schedule .e-schedule-toolbar .e-icon-schedule-excel-export::before {
content: '\e242';
}
.e-schedule-toolbar .e-toolbar-item.e-today {
display: none !important;
}
</style>
<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" };
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(2019, 1, 8, 9, 30, 0), EndTime = new DateTime(2019, 1, 8, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 2, Subject = "Thule Air Crash Report", Location = "Texas", StartTime = new DateTime(2019, 1, 9, 12, 0, 0), EndTime = new DateTime(2019, 1, 9, 14, 0, 0) });
appData.Add(new AppointmentData
{ Id = 3, Subject = "Blue Moon Eclipse", Location = "Australia", StartTime = new DateTime(2019, 1, 10, 10, 30, 0), EndTime = new DateTime(2019, 1, 10, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 4, Subject = "Meteor Showers in 2019", Location = "Canada", StartTime = new DateTime(2019, 1, 11, 13, 0, 0), EndTime = new DateTime(2019, 1, 11, 14, 30, 0) });
appData.Add(new AppointmentData
{ Id = 5, Subject = "Milky Way as Melting pot", Location = "Mexico", StartTime = new DateTime(2019, 1, 12, 12, 0, 0), EndTime = new DateTime(2019, 1, 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; }
}Custom separator in CSV
The Scheduler exports the event data to CSV format with , as separator. You can change separator by setting separator property in ExportOptions.
@using Syncfusion.EJ2.Schedule
<ejs-schedule id="schedule" width="100%" height="650px" views="@ViewBag.view" selectedDate="new DateTime(2022, 2, 15)" actionBegin="onActionBegin">
<e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
</ejs-schedule>
<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; }
}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 or 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.
@using Syncfusion.EJ2.Schedule
<ejs-button id="ics-export" content="Export"></ejs-button>
<ejs-schedule id="schedule" width="100%" height="550px" selectedDate="new DateTime(2019, 1, 10)">
<e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
</ejs-schedule>
<style>
.calendar-import.e-upload {
border: 0;
padding-left: 0 !important;
}
.calendar-import.e-upload .e-file-select-wrap {
padding: 0
}
.calendar-import.e-upload .e-file-select-wrap .e-file-drop {
display: none;
}
</style>
<script type="text/javascript">
document.getElementById("ics-export").addEventListener('click', function () {
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
scheduleObj.exportToICalendar();
});
</script>public ActionResult Index()
{
ViewBag.datasource = GetScheduleData();
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(2019, 1, 8, 9, 30, 0), EndTime = new DateTime(2019, 1, 8, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 2, Subject = "Thule Air Crash Report", Location = "Texas", StartTime = new DateTime(2019, 1, 9, 12, 0, 0), EndTime = new DateTime(2019, 1, 9, 14, 0, 0) });
appData.Add(new AppointmentData
{ Id = 3, Subject = "Blue Moon Eclipse", Location = "Australia", StartTime = new DateTime(2019, 1, 10, 10, 30, 0), EndTime = new DateTime(2019, 1, 10, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 4, Subject = "Meteor Showers in 2019", Location = "Canada", StartTime = new DateTime(2019, 1, 11, 13, 0, 0), EndTime = new DateTime(2019, 1, 11, 14, 30, 0) });
appData.Add(new AppointmentData
{ Id = 5, Subject = "Milky Way as Melting pot", Location = "Mexico", StartTime = new DateTime(2019, 1, 12, 12, 0, 0), EndTime = new DateTime(2019, 1, 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; }
}Customizing column header with custom fields exporting
Using fields property, we can only export the defined fields into excel without customizing the header. Now we can provide the alternate support to customize the header of custom fields exporting using the fieldsInfo option through the ExportFieldInfo interface and pass it as an argument to the exportToExcel method as shown in the following example.
@using Syncfusion.EJ2.Schedule
<ejs-schedule id="schedule" width="100%" height="550px" selectedDate="new DateTime(2019, 1, 10)" actionBegin="onActionBegin">
<e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
</ejs-schedule>
<style>
.e-schedule .e-schedule-toolbar .e-icon-schedule-excel-export::before {
content: '\e242';
}
</style>
<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 customFields = [
{ name: 'Subject', text: 'Summary' },
{ name: 'StartTime', text: 'First Date' },
{ name: 'EndTime', text: 'Last Date' },
{ name: 'Location', text: 'Place' },
{ name: 'OwnerId', text: 'Owners' }
];
var exportValues = { fieldsInfo: customFields };
scheduleObj.exportToExcel(exportValues);
}
</script>public ActionResult Index()
{
ViewBag.datasource = GetScheduleData();
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(2019, 1, 8, 9, 30, 0), EndTime = new DateTime(2019, 1, 8, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 2, Subject = "Thule Air Crash Report", Location = "Texas", StartTime = new DateTime(2019, 1, 9, 12, 0, 0), EndTime = new DateTime(2019, 1, 9, 14, 0, 0) });
appData.Add(new AppointmentData
{ Id = 3, Subject = "Blue Moon Eclipse", Location = "Australia", StartTime = new DateTime(2019, 1, 10, 10, 30, 0), EndTime = new DateTime(2019, 1, 10, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 4, Subject = "Meteor Showers in 2019", Location = "Canada", StartTime = new DateTime(2019, 1, 11, 13, 0, 0), EndTime = new DateTime(2019, 1, 11, 14, 30, 0) });
appData.Add(new AppointmentData
{ Id = 5, Subject = "Milky Way as Melting pot", Location = "Mexico", StartTime = new DateTime(2019, 1, 12, 12, 0, 0), EndTime = new DateTime(2019, 1, 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 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.
@using Syncfusion.EJ2.Schedule
<ejs-button id="ics-export" content="Export"></ejs-button>
<ejs-schedule id="schedule" width="100%" height="550px" selectedDate="new DateTime(2019, 1, 10)">
<e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
</ejs-schedule>
<style>
.calendar-import.e-upload {
border: 0;
padding-left: 0 !important;
}
.calendar-import.e-upload .e-file-select-wrap {
padding: 0
}
.calendar-import.e-upload .e-file-select-wrap .e-file-drop {
display: none;
}
</style>
<script type="text/javascript">
document.getElementById('ics-export').onclick = function () {
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
scheduleObj.exportToICalendar('ScheduleEvents');
}
</script>public ActionResult Index()
{
ViewBag.datasource = GetScheduleData();
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(2019, 1, 8, 9, 30, 0), EndTime = new DateTime(2019, 1, 8, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 2, Subject = "Thule Air Crash Report", Location = "Texas", StartTime = new DateTime(2019, 1, 9, 12, 0, 0), EndTime = new DateTime(2019, 1, 9, 14, 0, 0) });
appData.Add(new AppointmentData
{ Id = 3, Subject = "Blue Moon Eclipse", Location = "Australia", StartTime = new DateTime(2019, 1, 10, 10, 30, 0), EndTime = new DateTime(2019, 1, 10, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 4, Subject = "Meteor Showers in 2019", Location = "Canada", StartTime = new DateTime(2019, 1, 11, 13, 0, 0), EndTime = new DateTime(2019, 1, 11, 14, 30, 0) });
appData.Add(new AppointmentData
{ Id = 5, Subject = "Milky Way as Melting pot", Location = "Mexico", StartTime = new DateTime(2019, 1, 12, 12, 0, 0), EndTime = new DateTime(2019, 1, 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; }
}Import events from other calendars
The events from external calendars (ICS files) can be imported into 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.
@using Syncfusion.EJ2.Schedule
@{
var button = new Syncfusion.EJ2.Inputs.UploaderButtonsProps { Browse = "Choose file" };
}
<ejs-uploader id="ics-import" allowedExtensions=".ics" cssClass="calendar-import" showFileList="false" selected="onSelected" buttons="button" multiple="false"></ejs-uploader>
<ejs-schedule id="schedule" width="100%" height="550px" selectedDate="new DateTime(2019, 1, 10)">
<e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
</ejs-schedule>
<style>
.calendar-import.e-upload {
border: 0;
padding-left: 0 !important;
}
.calendar-import.e-upload .e-file-select-wrap {
padding: 0
}
.calendar-import.e-upload .e-file-select-wrap .e-file-drop {
display: none;
}
</style>
<script type="text/javascript">
window.onload = function (args) {
var uploaderObj = document.getElementById("ics-import").ej2_instances[0];
uploaderObj.setProperties({
buttons: {
browse: 'Choose file',
}
})
}
function onSelected(args) {
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
scheduleObj.importICalendar(args.event.target.files[0]);
}
</script>public ActionResult Index()
{
ViewBag.datasource = GetScheduleData();
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(2019, 1, 8, 9, 30, 0), EndTime = new DateTime(2019, 1, 8, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 2, Subject = "Thule Air Crash Report", Location = "Texas", StartTime = new DateTime(2019, 1, 9, 12, 0, 0), EndTime = new DateTime(2019, 1, 9, 14, 0, 0) });
appData.Add(new AppointmentData
{ Id = 3, Subject = "Blue Moon Eclipse", Location = "Australia", StartTime = new DateTime(2019, 1, 10, 10, 30, 0), EndTime = new DateTime(2019, 1, 10, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 4, Subject = "Meteor Showers in 2019", Location = "Canada", StartTime = new DateTime(2019, 1, 11, 13, 0, 0), EndTime = new DateTime(2019, 1, 11, 14, 30, 0) });
appData.Add(new AppointmentData
{ Id = 5, Subject = "Milky Way as Melting pot", Location = "Mexico", StartTime = new DateTime(2019, 1, 12, 12, 0, 0), EndTime = new DateTime(2019, 1, 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 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. You can find it below.
- Using print method without options.
- Using a print method with options.
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 Syncfusion.EJ2.Schedule
<ejs-schedule id="schedule" width="100%" height="100%" selectedDate="new DateTime(2019, 1, 10)" actionBegin="onActionBegin">
<e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
</ejs-schedule>
<style>
.e-schedule .e-schedule-toolbar .e-icon-schedule-print::before {
content: '\e813';
}
</style>
<script type="text/javascript">
function onActionBegin(args) {
if (args.requestType === 'toolbarItemRendering') {
var exportItem = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-print',
text: 'Print', cssClass: 'e-print', click: onPrintIconClick
};
args.items.push(exportItem);
}
}
function onPrintIconClick() {
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
scheduleObj.print();
}
</script>public ActionResult Index()
{
ViewBag.datasource = GetScheduleData();
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(2019, 1, 8, 9, 30, 0), EndTime = new DateTime(2019, 1, 8, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 2, Subject = "Thule Air Crash Report", Location = "Texas", StartTime = new DateTime(2019, 1, 9, 12, 0, 0), EndTime = new DateTime(2019, 1, 9, 14, 0, 0) });
appData.Add(new AppointmentData
{ Id = 3, Subject = "Blue Moon Eclipse", Location = "Australia", StartTime = new DateTime(2019, 1, 10, 10, 30, 0), EndTime = new DateTime(2019, 1, 10, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 4, Subject = "Meteor Showers in 2019", Location = "Canada", StartTime = new DateTime(2019, 1, 11, 13, 0, 0), EndTime = new DateTime(2019, 1, 11, 14, 30, 0) });
appData.Add(new AppointmentData
{ Id = 5, Subject = "Milky Way as Melting pot", Location = "Mexico", StartTime = new DateTime(2019, 1, 12, 12, 0, 0), EndTime = new DateTime(2019, 1, 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; }
}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.
@using Syncfusion.EJ2.Schedule
<ejs-schedule id="schedule" width="100%" height="100%" selectedDate="new DateTime(2019, 1, 10)" actionBegin="onActionBegin">
<e-schedule-eventsettings dataSource="@ViewBag.datasource"></e-schedule-eventsettings>
</ejs-schedule>
<style>
.e-schedule .e-schedule-toolbar .e-icon-schedule-print::before {
content: '\e813';
}
</style>
<script type="text/javascript">
function onActionBegin(args) {
if (args.requestType === 'toolbarItemRendering') {
var exportItem = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-print',
text: 'Print', cssClass: 'e-print', click: onPrintIconClick
};
args.items.push(exportItem);
}
}
function onPrintIconClick() {
var scheduleObj = document.getElementById('schedule').ej2_instances[0];
let printModel = {
agendaDaysCount: 14,
cssClass: 'e-print-schedule',
currentView: scheduleObj.currentView,
dateFormat: 'dd-MMM-yyyy',
enableRtl: false,
endHour: '18:00',
firstDayOfWeek: 1,
firstMonthOfYear: 0,
group: {},
height: 'auto',
locale: scheduleObj.locale,
maxDate: scheduleObj.selectedDate,
minDate: scheduleObj.getCurrentViewDates()[0],
readonly: true,
resources: [],
rowAutoHeight: false,
selectedDate: new Date(),
showHeaderBar: false,
showTimeIndicator: false,
showWeekNumber: false,
showWeekend: false,
startHour: '06:00',
timeFormat: 'HH',
timeScale: { enable: true },
width: 'auto',
workDays: [1, 2, 3, 4, 5],
workHours: { highlight: true, start: '10:00', end: '20:00' }
};
scheduleObj.print(printModel);
}
</script>public ActionResult Index()
{
ViewBag.datasource = GetScheduleData();
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(2019, 1, 8, 9, 30, 0), EndTime = new DateTime(2019, 1, 8, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 2, Subject = "Thule Air Crash Report", Location = "Texas", StartTime = new DateTime(2019, 1, 9, 12, 0, 0), EndTime = new DateTime(2019, 1, 9, 14, 0, 0) });
appData.Add(new AppointmentData
{ Id = 3, Subject = "Blue Moon Eclipse", Location = "Australia", StartTime = new DateTime(2019, 1, 10, 10, 30, 0), EndTime = new DateTime(2019, 1, 10, 11, 0, 0) });
appData.Add(new AppointmentData
{ Id = 4, Subject = "Meteor Showers in 2019", Location = "Canada", StartTime = new DateTime(2019, 1, 11, 13, 0, 0), EndTime = new DateTime(2019, 1, 11, 14, 30, 0) });
appData.Add(new AppointmentData
{ Id = 5, Subject = "Milky Way as Melting pot", Location = "Mexico", StartTime = new DateTime(2019, 1, 12, 12, 0, 0), EndTime = new DateTime(2019, 1, 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; }
}NOTE
You can refer to our ASP.NET Core Scheduler feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET Core Scheduler example to knows how to present and manipulate data.