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.
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.
Before you start with excel exporting functionality, you need to import and inject the
ExcelExport
module from the ‘@syncfusion/ej2-schedule’ package using theInject
method of Scheduler.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule id='Schedule' ref="ScheduleObj" :cssClass="cssClass" height="550px" :selectedDate='selectedDate' :eventSettings='eventSettings'
:currentView="currentView" :actionBegin="onActionBegin">
<e-views>
<e-view option="Week"></e-view>
</e-views>
</ejs-schedule>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { SchedulePlugin, Week, View, Resize, DragAndDrop, ExcelExport
} from "@syncfusion/ej2-vue-schedule";
import { scheduleData } from './datasource.js';
Vue.use(SchedulePlugin);
export default {
data: function () {
return {
cssClass: 'excel-export',
eventSettings: { dataSource: scheduleData },
selectedDate: new Date(2019, 0, 10),
currentView: 'Week'
}
},
provide: {
schedule: [Week, Resize, DragAndDrop, ExcelExport]
},
methods: {
onActionBegin: function (args) {
if (args.requestType === 'toolbarItemRendering') {
let exportItem = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
text: 'Excel Export', cssClass: 'e-excel-export', click: this.onExportClick.bind(this)
};
args.items.push(exportItem);
}
},
onExportClick: function () {
let scheduleObj = this.$refs.ScheduleObj;
scheduleObj.exportToExcel();
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-schedule/styles/material.css";
.excel-export.e-schedule .e-schedule-toolbar .e-icon-schedule-excel-export::before {
content: '\e242';
}
.excel-export.e-schedule .e-schedule-toolbar .e-toolbar-item.e-today{
display: none !important;
}
</style>
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.scheduleData = [
{
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'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 8, 9, 30),
EndTime: new Date(2019, 0, 8, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 9, 13, 0),
EndTime: new Date(2019, 0, 9, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 10, 12, 0),
EndTime: new Date(2019, 0, 10, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
Location: 'Bermuda',
StartTime: new Date(2019, 0, 10, 9, 30),
EndTime: new Date(2019, 0, 10, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
Location: 'Himalayas',
StartTime: new Date(2019, 0, 11, 11, 0),
EndTime: new Date(2019, 0, 11, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 12, 9, 0),
EndTime: new Date(2019, 0, 12, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 14, 11, 0),
EndTime: new Date(2019, 0, 14, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
Location: 'Africa',
StartTime: new Date(2019, 0, 16, 11, 0),
EndTime: new Date(2019, 0, 16, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
Location: 'London',
StartTime: new Date(2019, 0, 17, 9, 30),
EndTime: new Date(2019, 0, 17, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
Location: 'Sweden',
StartTime: new Date(2019, 0, 4, 10, 0),
EndTime: new Date(2019, 0, 4, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 2, 10, 30),
EndTime: new Date(2019, 0, 2, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 1, 10, 0),
EndTime: new Date(2019, 0, 1, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
Location: 'California',
StartTime: new Date(2019, 0, 15, 9, 30),
EndTime: new Date(2019, 0, 15, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
Location: 'Alaska',
StartTime: new Date(2019, 0, 18, 11, 0),
EndTime: new Date(2019, 0, 18, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 7, 5, 30),
EndTime: new Date(2019, 0, 7, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 7, 17, 0),
EndTime: new Date(2019, 0, 7, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
Location: 'San Fransisco',
StartTime: new Date(2019, 0, 10, 6, 0),
EndTime: new Date(2019, 0, 10, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 10, 16, 0),
EndTime: new Date(2019, 0, 10, 18, 0),
CategoryColor: '#ea7a57'
}, {
Id: 21,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 6, 14, 0),
EndTime: new Date(2019, 0, 6, 16, 0),
CategoryColor: '#ea7a57'
}, {
Id: 22,
Subject: 'The Cycle of Seasons',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 8, 14, 30),
EndTime: new Date(2019, 0, 8, 16, 0),
CategoryColor: '#00bdae'
}, {
Id: 23,
Subject: 'Sky Gazers',
Location: 'Greenland',
StartTime: new Date(2019, 0, 11, 14, 30),
EndTime: new Date(2019, 0, 11, 16, 0),
CategoryColor: '#ea7a57'
}, {
Id: 24,
Subject: 'Facts of Humming Birds',
Location: 'California',
StartTime: new Date(2019, 0, 12, 12, 30),
EndTime: new Date(2019, 0, 12, 14, 30),
CategoryColor: '#7fa900'
}
];
});
By default, Scheduler exports all the default event fields that are mapped to it through the 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
through the ExportOptions
interface and pass it as argument to the exportToExcel
method as shown in the following example. For example: ['Id', 'Subject', 'StartTime', 'EndTime', 'Location']
.
<template>
<div>
<div id='app'>
<div id='container'>
<ejs-schedule id='Schedule' ref="ScheduleObj" :cssClass="cssClass" height="550px" :selectedDate='selectedDate' :eventSettings='eventSettings'
:currentView="currentView" :actionBegin="onActionBegin">
<e-views>
<e-view option="Week"></e-view>
</e-views>
</ejs-schedule>
</div>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { SchedulePlugin, Week, View, Resize, DragAndDrop, ExcelExport
} from "@syncfusion/ej2-vue-schedule";
import { scheduleData } from './datasource.js';
Vue.use(SchedulePlugin);
export default {
data: function () {
return {
cssClass: 'excel-export',
eventSettings: { dataSource: scheduleData },
selectedDate: new Date(2019, 0, 10),
currentView: 'Week'
}
},
provide: {
schedule: [Week, Resize, DragAndDrop, ExcelExport]
},
methods: {
onActionBegin: function (args) {
if (args.requestType === 'toolbarItemRendering') {
let exportItem = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
text: 'Excel Export', cssClass: 'e-excel-export', click: this.onExportClick.bind(this)
};
args.items.push(exportItem);
}
},
onExportClick: function () {
let scheduleObj = this.$refs.ScheduleObj;
let exportValues = {
fields: ['Id', 'Subject', 'StartTime', 'EndTime', 'Location']
};
scheduleObj.exportToExcel(exportValues);
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-schedule/styles/material.css";
.excel-export.e-schedule .e-schedule-toolbar .e-icon-schedule-excel-export::before {
content: '\e242';
}
.excel-export.e-schedule .e-schedule-toolbar .e-toolbar-item.e-today{
display: none !important;
}
</style>
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.scheduleData = [
{
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'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 8, 9, 30),
EndTime: new Date(2019, 0, 8, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 9, 13, 0),
EndTime: new Date(2019, 0, 9, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 10, 12, 0),
EndTime: new Date(2019, 0, 10, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
Location: 'Bermuda',
StartTime: new Date(2019, 0, 10, 9, 30),
EndTime: new Date(2019, 0, 10, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
Location: 'Himalayas',
StartTime: new Date(2019, 0, 11, 11, 0),
EndTime: new Date(2019, 0, 11, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 12, 9, 0),
EndTime: new Date(2019, 0, 12, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 14, 11, 0),
EndTime: new Date(2019, 0, 14, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
Location: 'Africa',
StartTime: new Date(2019, 0, 16, 11, 0),
EndTime: new Date(2019, 0, 16, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
Location: 'London',
StartTime: new Date(2019, 0, 17, 9, 30),
EndTime: new Date(2019, 0, 17, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
Location: 'Sweden',
StartTime: new Date(2019, 0, 4, 10, 0),
EndTime: new Date(2019, 0, 4, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 2, 10, 30),
EndTime: new Date(2019, 0, 2, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 1, 10, 0),
EndTime: new Date(2019, 0, 1, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
Location: 'California',
StartTime: new Date(2019, 0, 15, 9, 30),
EndTime: new Date(2019, 0, 15, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
Location: 'Alaska',
StartTime: new Date(2019, 0, 18, 11, 0),
EndTime: new Date(2019, 0, 18, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 7, 5, 30),
EndTime: new Date(2019, 0, 7, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 7, 17, 0),
EndTime: new Date(2019, 0, 7, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
Location: 'San Fransisco',
StartTime: new Date(2019, 0, 10, 6, 0),
EndTime: new Date(2019, 0, 10, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 10, 16, 0),
EndTime: new Date(2019, 0, 10, 18, 0),
CategoryColor: '#ea7a57'
}, {
Id: 21,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 6, 14, 0),
EndTime: new Date(2019, 0, 6, 16, 0),
CategoryColor: '#ea7a57'
}, {
Id: 22,
Subject: 'The Cycle of Seasons',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 8, 14, 30),
EndTime: new Date(2019, 0, 8, 16, 0),
CategoryColor: '#00bdae'
}, {
Id: 23,
Subject: 'Sky Gazers',
Location: 'Greenland',
StartTime: new Date(2019, 0, 11, 14, 30),
EndTime: new Date(2019, 0, 11, 16, 0),
CategoryColor: '#ea7a57'
}, {
Id: 24,
Subject: 'Facts of Humming Birds',
Location: 'California',
StartTime: new Date(2019, 0, 12, 12, 30),
EndTime: new Date(2019, 0, 12, 14, 30),
CategoryColor: '#7fa900'
}
];
});
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
.
<template>
<div>
<div id='app'>
<div id='container'>
<ejs-schedule id='Schedule' ref="ScheduleObj" :cssClass="cssClass" height="550px" :selectedDate='selectedDate' :eventSettings='eventSettings'
:currentView="currentView" :actionBegin="onActionBegin">
<e-views>
<e-view option="Week"></e-view>
</e-views>
</ejs-schedule>
</div>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { SchedulePlugin, Week, View, Resize, DragAndDrop, ExcelExport
} from "@syncfusion/ej2-vue-schedule";
import { scheduleData } from './datasource.js';
Vue.use(SchedulePlugin);
export default {
data: function () {
return {
cssClass: 'excel-export',
eventSettings: { dataSource: scheduleData },
selectedDate: new Date(2019, 0, 10),
currentView: 'Week'
}
},
provide: {
schedule: [Week, Resize, DragAndDrop, ExcelExport]
},
methods: {
onActionBegin: function (args) {
if (args.requestType === 'toolbarItemRendering') {
let exportItem = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
text: 'Excel Export', cssClass: 'e-excel-export', click: this.onExportClick.bind(this)
};
args.items.push(exportItem);
}
},
onExportClick: function () {
let scheduleObj = this.$refs.ScheduleObj;
let exportValues = { includeOccurrences: true };
scheduleObj.exportToExcel(exportValues);
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-schedule/styles/material.css";
.excel-export.e-schedule .e-schedule-toolbar .e-icon-schedule-excel-export::before {
content: '\e242';
}
.excel-export.e-schedule .e-schedule-toolbar .e-toolbar-item.e-today{
display: none !important;
}
</style>
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.scheduleData = [
{
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'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 8, 9, 30),
EndTime: new Date(2019, 0, 8, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 9, 13, 0),
EndTime: new Date(2019, 0, 9, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 10, 12, 0),
EndTime: new Date(2019, 0, 10, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
Location: 'Bermuda',
StartTime: new Date(2019, 0, 10, 9, 30),
EndTime: new Date(2019, 0, 10, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
Location: 'Himalayas',
StartTime: new Date(2019, 0, 11, 11, 0),
EndTime: new Date(2019, 0, 11, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 12, 9, 0),
EndTime: new Date(2019, 0, 12, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 14, 11, 0),
EndTime: new Date(2019, 0, 14, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
Location: 'Africa',
StartTime: new Date(2019, 0, 16, 11, 0),
EndTime: new Date(2019, 0, 16, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
Location: 'London',
StartTime: new Date(2019, 0, 17, 9, 30),
EndTime: new Date(2019, 0, 17, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
Location: 'Sweden',
StartTime: new Date(2019, 0, 4, 10, 0),
EndTime: new Date(2019, 0, 4, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 2, 10, 30),
EndTime: new Date(2019, 0, 2, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 1, 10, 0),
EndTime: new Date(2019, 0, 1, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
Location: 'California',
StartTime: new Date(2019, 0, 15, 9, 30),
EndTime: new Date(2019, 0, 15, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
Location: 'Alaska',
StartTime: new Date(2019, 0, 18, 11, 0),
EndTime: new Date(2019, 0, 18, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 7, 5, 30),
EndTime: new Date(2019, 0, 7, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 7, 17, 0),
EndTime: new Date(2019, 0, 7, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
Location: 'San Fransisco',
StartTime: new Date(2019, 0, 10, 6, 0),
EndTime: new Date(2019, 0, 10, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 10, 16, 0),
EndTime: new Date(2019, 0, 10, 18, 0),
CategoryColor: '#ea7a57'
}, {
Id: 21,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 6, 14, 0),
EndTime: new Date(2019, 0, 6, 16, 0),
CategoryColor: '#ea7a57'
}, {
Id: 22,
Subject: 'The Cycle of Seasons',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 8, 14, 30),
EndTime: new Date(2019, 0, 8, 16, 0),
CategoryColor: '#00bdae'
}, {
Id: 23,
Subject: 'Sky Gazers',
Location: 'Greenland',
StartTime: new Date(2019, 0, 11, 14, 30),
EndTime: new Date(2019, 0, 11, 16, 0),
CategoryColor: '#ea7a57'
}, {
Id: 24,
Subject: 'Facts of Humming Birds',
Location: 'California',
StartTime: new Date(2019, 0, 12, 12, 30),
EndTime: new Date(2019, 0, 12, 14, 30),
CategoryColor: '#7fa900'
}
];
});
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 of ExportOptions
interface.
By default, the event data are taken from Scheduler dataSource.
<template>
<div>
<div id='app'>
<div id='container'>
<ejs-schedule id='Schedule' ref="ScheduleObj" :cssClass="cssClass" height="550px" :selectedDate='selectedDate' :eventSettings='eventSettings'
:currentView="currentView" :actionBegin="onActionBegin">
<e-views>
<e-view option="Week"></e-view>
</e-views>
</ejs-schedule>
</div>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { SchedulePlugin, Week, View, Resize, DragAndDrop, ExcelExport
} from "@syncfusion/ej2-vue-schedule";
import { scheduleData } from './datasource.js';
Vue.use(SchedulePlugin);
export default {
data: function () {
return {
cssClass: 'excel-export',
eventSettings: { dataSource: scheduleData },
selectedDate: new Date(2019, 0, 10),
currentView: 'Week'
}
},
provide: {
schedule: [Week, Resize, DragAndDrop, ExcelExport]
},
methods: {
onActionBegin: function (args) {
if (args.requestType === 'toolbarItemRendering') {
let exportItem = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
text: 'Excel Export', cssClass: 'e-excel-export', click: this.onExportClick.bind(this)
};
args.items.push(exportItem);
}
},
onExportClick: function () {
let scheduleObj = this.$refs.ScheduleObj;
let 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>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-schedule/styles/material.css";
.excel-export.e-schedule .e-schedule-toolbar .e-icon-schedule-excel-export::before {
content: '\e242';
}
.excel-export.e-schedule .e-schedule-toolbar .e-toolbar-item.e-today{
display: none !important;
}
</style>
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.scheduleData = [
{
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'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 8, 9, 30),
EndTime: new Date(2019, 0, 8, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 9, 13, 0),
EndTime: new Date(2019, 0, 9, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 10, 12, 0),
EndTime: new Date(2019, 0, 10, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
Location: 'Bermuda',
StartTime: new Date(2019, 0, 10, 9, 30),
EndTime: new Date(2019, 0, 10, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
Location: 'Himalayas',
StartTime: new Date(2019, 0, 11, 11, 0),
EndTime: new Date(2019, 0, 11, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 12, 9, 0),
EndTime: new Date(2019, 0, 12, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 14, 11, 0),
EndTime: new Date(2019, 0, 14, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
Location: 'Africa',
StartTime: new Date(2019, 0, 16, 11, 0),
EndTime: new Date(2019, 0, 16, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
Location: 'London',
StartTime: new Date(2019, 0, 17, 9, 30),
EndTime: new Date(2019, 0, 17, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
Location: 'Sweden',
StartTime: new Date(2019, 0, 4, 10, 0),
EndTime: new Date(2019, 0, 4, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 2, 10, 30),
EndTime: new Date(2019, 0, 2, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 1, 10, 0),
EndTime: new Date(2019, 0, 1, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
Location: 'California',
StartTime: new Date(2019, 0, 15, 9, 30),
EndTime: new Date(2019, 0, 15, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
Location: 'Alaska',
StartTime: new Date(2019, 0, 18, 11, 0),
EndTime: new Date(2019, 0, 18, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 7, 5, 30),
EndTime: new Date(2019, 0, 7, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 7, 17, 0),
EndTime: new Date(2019, 0, 7, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
Location: 'San Fransisco',
StartTime: new Date(2019, 0, 10, 6, 0),
EndTime: new Date(2019, 0, 10, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 10, 16, 0),
EndTime: new Date(2019, 0, 10, 18, 0),
CategoryColor: '#ea7a57'
}, {
Id: 21,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 6, 14, 0),
EndTime: new Date(2019, 0, 6, 16, 0),
CategoryColor: '#ea7a57'
}, {
Id: 22,
Subject: 'The Cycle of Seasons',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 8, 14, 30),
EndTime: new Date(2019, 0, 8, 16, 0),
CategoryColor: '#00bdae'
}, {
Id: 23,
Subject: 'Sky Gazers',
Location: 'Greenland',
StartTime: new Date(2019, 0, 11, 14, 30),
EndTime: new Date(2019, 0, 11, 16, 0),
CategoryColor: '#ea7a57'
}, {
Id: 24,
Subject: 'Facts of Humming Birds',
Location: 'California',
StartTime: new Date(2019, 0, 12, 12, 30),
EndTime: new Date(2019, 0, 12, 14, 30),
CategoryColor: '#7fa900'
}
];
});
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, by defining the desired fileName
through the ExportOptions
interface and passing it as an argument to the exportToExcel
method.
<template>
<div>
<div id='app'>
<div id='container'>
<ejs-schedule id='Schedule' ref="ScheduleObj" :cssClass="cssClass" height="550px" :selectedDate='selectedDate' :eventSettings='eventSettings'
:currentView="currentView" :actionBegin="onActionBegin">
<e-views>
<e-view option="Week"></e-view>
</e-views>
</ejs-schedule>
</div>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { SchedulePlugin, Week, View, Resize, DragAndDrop, ExcelExport
} from "@syncfusion/ej2-vue-schedule";
import { scheduleData } from './datasource.js';
Vue.use(SchedulePlugin);
export default {
data: function () {
return {
cssClass: 'excel-export',
eventSettings: { dataSource: scheduleData },
selectedDate: new Date(2019, 0, 10),
currentView: 'Week'
}
},
provide: {
schedule: [Week, Resize, DragAndDrop, ExcelExport]
},
methods: {
onActionBegin: function (args) {
if (args.requestType === 'toolbarItemRendering') {
let exportItem = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
text: 'Excel Export', cssClass: 'e-excel-export', click: this.onExportClick.bind(this)
};
args.items.push(exportItem);
}
},
onExportClick: function () {
let scheduleObj = this.$refs.ScheduleObj;
let exportValues = { fileName: "SchedulerData" };
scheduleObj.exportToExcel(exportValues);
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-schedule/styles/material.css";
.excel-export.e-schedule .e-schedule-toolbar .e-icon-schedule-excel-export::before {
content: '\e242';
}
.excel-export.e-schedule .e-schedule-toolbar .e-toolbar-item.e-today{
display: none !important;
}
</style>
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.scheduleData = [
{
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'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 8, 9, 30),
EndTime: new Date(2019, 0, 8, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 9, 13, 0),
EndTime: new Date(2019, 0, 9, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 10, 12, 0),
EndTime: new Date(2019, 0, 10, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
Location: 'Bermuda',
StartTime: new Date(2019, 0, 10, 9, 30),
EndTime: new Date(2019, 0, 10, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
Location: 'Himalayas',
StartTime: new Date(2019, 0, 11, 11, 0),
EndTime: new Date(2019, 0, 11, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 12, 9, 0),
EndTime: new Date(2019, 0, 12, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 14, 11, 0),
EndTime: new Date(2019, 0, 14, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
Location: 'Africa',
StartTime: new Date(2019, 0, 16, 11, 0),
EndTime: new Date(2019, 0, 16, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
Location: 'London',
StartTime: new Date(2019, 0, 17, 9, 30),
EndTime: new Date(2019, 0, 17, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
Location: 'Sweden',
StartTime: new Date(2019, 0, 4, 10, 0),
EndTime: new Date(2019, 0, 4, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 2, 10, 30),
EndTime: new Date(2019, 0, 2, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 1, 10, 0),
EndTime: new Date(2019, 0, 1, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
Location: 'California',
StartTime: new Date(2019, 0, 15, 9, 30),
EndTime: new Date(2019, 0, 15, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
Location: 'Alaska',
StartTime: new Date(2019, 0, 18, 11, 0),
EndTime: new Date(2019, 0, 18, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 7, 5, 30),
EndTime: new Date(2019, 0, 7, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 7, 17, 0),
EndTime: new Date(2019, 0, 7, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
Location: 'San Fransisco',
StartTime: new Date(2019, 0, 10, 6, 0),
EndTime: new Date(2019, 0, 10, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 10, 16, 0),
EndTime: new Date(2019, 0, 10, 18, 0),
CategoryColor: '#ea7a57'
}, {
Id: 21,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 6, 14, 0),
EndTime: new Date(2019, 0, 6, 16, 0),
CategoryColor: '#ea7a57'
}, {
Id: 22,
Subject: 'The Cycle of Seasons',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 8, 14, 30),
EndTime: new Date(2019, 0, 8, 16, 0),
CategoryColor: '#00bdae'
}, {
Id: 23,
Subject: 'Sky Gazers',
Location: 'Greenland',
StartTime: new Date(2019, 0, 11, 14, 30),
EndTime: new Date(2019, 0, 11, 16, 0),
CategoryColor: '#ea7a57'
}, {
Id: 24,
Subject: 'Facts of Humming Birds',
Location: 'California',
StartTime: new Date(2019, 0, 12, 12, 30),
EndTime: new Date(2019, 0, 12, 14, 30),
CategoryColor: '#7fa900'
}
];
});
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
through the ExportOptions
interface. By default, the exportType
is set to xlsx
.
<template>
<div>
<div id='app'>
<div id='container'>
<ejs-schedule id='Schedule' ref="ScheduleObj" :cssClass="cssClass" height="550px" :selectedDate='selectedDate' :eventSettings='eventSettings'
:currentView="currentView" :actionBegin="onActionBegin">
<e-views>
<e-view option="Week"></e-view>
</e-views>
</ejs-schedule>
</div>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { SchedulePlugin, Week, View, Resize, DragAndDrop, ExcelExport
} from "@syncfusion/ej2-vue-schedule";
import { scheduleData } from './datasource.js';
Vue.use(SchedulePlugin);
export default {
data: function () {
return {
cssClass: 'excel-export',
eventSettings: { dataSource: scheduleData },
selectedDate: new Date(2019, 0, 10),
currentView: 'Week'
}
},
provide: {
schedule: [Week, Resize, DragAndDrop, ExcelExport]
},
methods: {
onActionBegin: function (args) {
if (args.requestType === 'toolbarItemRendering') {
let exportItem = {
align: 'Right', showTextOn: 'Both', prefixIcon: 'e-icon-schedule-excel-export',
text: 'Excel Export', cssClass: 'e-excel-export', click: this.onExportClick.bind(this)
};
args.items.push(exportItem);
}
},
onExportClick: function () {
let scheduleObj = this.$refs.ScheduleObj;
let exportValues = { exportType: "csv" };
scheduleObj.exportToExcel(exportValues);
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-schedule/styles/material.css";
.excel-export.e-schedule .e-schedule-toolbar .e-icon-schedule-excel-export::before {
content: '\e242';
}
.excel-export.e-schedule .e-schedule-toolbar .e-toolbar-item.e-today{
display: none !important;
}
</style>
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.scheduleData = [
{
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'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 8, 9, 30),
EndTime: new Date(2019, 0, 8, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 9, 13, 0),
EndTime: new Date(2019, 0, 9, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 10, 12, 0),
EndTime: new Date(2019, 0, 10, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
Location: 'Bermuda',
StartTime: new Date(2019, 0, 10, 9, 30),
EndTime: new Date(2019, 0, 10, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
Location: 'Himalayas',
StartTime: new Date(2019, 0, 11, 11, 0),
EndTime: new Date(2019, 0, 11, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 12, 9, 0),
EndTime: new Date(2019, 0, 12, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 14, 11, 0),
EndTime: new Date(2019, 0, 14, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
Location: 'Africa',
StartTime: new Date(2019, 0, 16, 11, 0),
EndTime: new Date(2019, 0, 16, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
Location: 'London',
StartTime: new Date(2019, 0, 17, 9, 30),
EndTime: new Date(2019, 0, 17, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
Location: 'Sweden',
StartTime: new Date(2019, 0, 4, 10, 0),
EndTime: new Date(2019, 0, 4, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 2, 10, 30),
EndTime: new Date(2019, 0, 2, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 1, 10, 0),
EndTime: new Date(2019, 0, 1, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
Location: 'California',
StartTime: new Date(2019, 0, 15, 9, 30),
EndTime: new Date(2019, 0, 15, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
Location: 'Alaska',
StartTime: new Date(2019, 0, 18, 11, 0),
EndTime: new Date(2019, 0, 18, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 7, 5, 30),
EndTime: new Date(2019, 0, 7, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 7, 17, 0),
EndTime: new Date(2019, 0, 7, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
Location: 'San Fransisco',
StartTime: new Date(2019, 0, 10, 6, 0),
EndTime: new Date(2019, 0, 10, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 10, 16, 0),
EndTime: new Date(2019, 0, 10, 18, 0),
CategoryColor: '#ea7a57'
}, {
Id: 21,
Subject: 'Alien Civilization',
Location: 'Space Centre USA',
StartTime: new Date(2019, 0, 6, 14, 0),
EndTime: new Date(2019, 0, 6, 16, 0),
CategoryColor: '#ea7a57'
}, {
Id: 22,
Subject: 'The Cycle of Seasons',
Location: 'Research Centre of USA',
StartTime: new Date(2019, 0, 8, 14, 30),
EndTime: new Date(2019, 0, 8, 16, 0),
CategoryColor: '#00bdae'
}, {
Id: 23,
Subject: 'Sky Gazers',
Location: 'Greenland',
StartTime: new Date(2019, 0, 11, 14, 30),
EndTime: new Date(2019, 0, 11, 16, 0),
CategoryColor: '#ea7a57'
}, {
Id: 24,
Subject: 'Facts of Humming Birds',
Location: 'California',
StartTime: new Date(2019, 0, 12, 12, 30),
EndTime: new Date(2019, 0, 12, 14, 30),
CategoryColor: '#7fa900'
}
];
});
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. To export the events of Scheduler to an ICS file, you need to first import the ICalendarExport
module from @syncfusion/ej2-schedule
package and then inject it using the Schedule.Inject(ICalendarExport)
method.
The following code example shows how the Scheduler events are exported to a calendar (.ics) file by making use of the exportToICalendar
public method.
<template>
<div>
<div id='app'>
<div id='container'>
<ejs-button id='ics-export' v-on:click.native="onClick">Export</ejs-button>
<ejs-schedule id="Schedule" ref="ScheduleObj" height="520px" :selectedDate='selectedDate'
:eventSettings='eventSettings' :currentView='currentView'>
<e-views>
<e-view option="Day"></e-view>
<e-view option="Week"></e-view>
<e-view option="WorkWeek"></e-view>
<e-view option="Month"></e-view>
<e-view option="Agenda"></e-view>
</e-views>
</ejs-schedule>
</div>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { SchedulePlugin, Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop, ICalendarExport, ICalendarImport } from "@syncfusion/ej2-vue-schedule";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { scheduleData } from './datasource.js';
Vue.use(ButtonPlugin);
Vue.use(SchedulePlugin);
export default {
data: function () {
return {
eventSettings: { dataSource: scheduleData },
selectedDate: new Date(2018, 1, 15),
currentView: 'Week',
cssClass:'calendar-import',
multiple: false,
allowedExtensions: '.ics',
buttons: {
browse: 'Choose file',
},
showFileList: false,
}
},
provide: {
schedule: [Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop, ICalendarExport, ICalendarImport]
},
methods: {
onClick: function () {
let scheduleObj = document.getElementById('Schedule').ej2_instances[0];
scheduleObj.exportToICalendar();
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-schedule/styles/material.css";
.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>
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.scheduleData = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 1, 11, 9, 30),
EndTime: new Date(2018, 1, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 1, 12, 12, 0),
EndTime: new Date(2018, 1, 12, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 1, 13, 9, 30),
EndTime: new Date(2018, 1, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 1, 14, 13, 0),
EndTime: new Date(2018, 1, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 1, 15, 9, 30),
EndTime: new Date(2018, 1, 15, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 1, 16, 11, 0),
EndTime: new Date(2018, 1, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
StartTime: new Date(2018, 1, 17, 9, 0),
EndTime: new Date(2018, 1, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 1, 19, 11, 0),
EndTime: new Date(2018, 1, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 1, 21, 11, 0),
EndTime: new Date(2018, 1, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 1, 22, 9, 30),
EndTime: new Date(2018, 1, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 1, 9, 10, 0),
EndTime: new Date(2018, 1, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 1, 7, 10, 30),
EndTime: new Date(2018, 1, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 1, 5, 10, 0),
EndTime: new Date(2018, 1, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 1, 20, 9, 30),
EndTime: new Date(2018, 1, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 23, 11, 0),
EndTime: new Date(2018, 1, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 1, 12, 5, 30),
EndTime: new Date(2018, 1, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 1, 12, 17, 0),
EndTime: new Date(2018, 1, 12, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 1, 15, 6, 0),
EndTime: new Date(2018, 1, 15, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 15, 16, 0),
EndTime: new Date(2018, 1, 15, 18, 0),
CategoryColor: '#ea7a57'
}
];
});
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
.
<template>
<div>
<div id='app'>
<div id='container'>
<ejs-button id='ics-export' v-on:click.native="onClick">Export</ejs-button>
<ejs-schedule id="Schedule" ref="ScheduleObj" height="520px" :selectedDate='selectedDate'
:eventSettings='eventSettings' :currentView='currentView'>
<e-views>
<e-view option="Day"></e-view>
<e-view option="Week"></e-view>
<e-view option="WorkWeek"></e-view>
<e-view option="Month"></e-view>
<e-view option="Agenda"></e-view>
</e-views>
</ejs-schedule>
</div>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { SchedulePlugin, Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop, ICalendarExport, ICalendarImport } from "@syncfusion/ej2-vue-schedule";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { scheduleData } from './datasource.js';
Vue.use(ButtonPlugin);
Vue.use(SchedulePlugin);
export default {
data: function () {
return {
eventSettings: { dataSource: scheduleData },
selectedDate: new Date(2018, 1, 15),
currentView: 'Week',
cssClass:'calendar-import',
multiple: false,
allowedExtensions: '.ics',
buttons: {
browse: 'Choose file',
},
showFileList: false,
}
},
provide: {
schedule: [Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop, ICalendarExport, ICalendarImport]
},
methods: {
onClick: function () {
let scheduleObj = document.getElementById('Schedule').ej2_instances[0];
scheduleObj.exportToICalendar('ScheduleEvents');
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-schedule/styles/material.css";
.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>
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.scheduleData = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 1, 11, 9, 30),
EndTime: new Date(2018, 1, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 1, 12, 12, 0),
EndTime: new Date(2018, 1, 12, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 1, 13, 9, 30),
EndTime: new Date(2018, 1, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 1, 14, 13, 0),
EndTime: new Date(2018, 1, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 1, 15, 9, 30),
EndTime: new Date(2018, 1, 15, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 1, 16, 11, 0),
EndTime: new Date(2018, 1, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
StartTime: new Date(2018, 1, 17, 9, 0),
EndTime: new Date(2018, 1, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 1, 19, 11, 0),
EndTime: new Date(2018, 1, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 1, 21, 11, 0),
EndTime: new Date(2018, 1, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 1, 22, 9, 30),
EndTime: new Date(2018, 1, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 1, 9, 10, 0),
EndTime: new Date(2018, 1, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 1, 7, 10, 30),
EndTime: new Date(2018, 1, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 1, 5, 10, 0),
EndTime: new Date(2018, 1, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 1, 20, 9, 30),
EndTime: new Date(2018, 1, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 23, 11, 0),
EndTime: new Date(2018, 1, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 1, 12, 5, 30),
EndTime: new Date(2018, 1, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 1, 12, 17, 0),
EndTime: new Date(2018, 1, 12, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 1, 15, 6, 0),
EndTime: new Date(2018, 1, 15, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 15, 16, 0),
EndTime: new Date(2018, 1, 15, 18, 0),
CategoryColor: '#ea7a57'
}
];
});
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.
To import an ICS file containing events into Scheduler, you need to first import the
ICalendarImport
module from@syncfusion/ej2-schedule
package and then inject it using theSchedule.Inject(ICalendarImport)
method.
The following example shows how to import an ICS file into Scheduler, using the importICalendar
method.
<template>
<div>
<div id='app'>
<div id='container'>
<ejs-uploader id='ics-import' :cssClass='cssClass' name="ics-import" :buttons="buttons"
:showFileList='showFileList' :multiple='multiple' :allowedExtensions='extensions'
:selected='onSelect'/>
<ejs-schedule id="Schedule" ref="ScheduleObj" height="520px" :selectedDate='selectedDate'
:eventSettings='eventSettings' :currentView='currentView'>
<e-views>
<e-view option="Day"></e-view>
<e-view option="Week"></e-view>
<e-view option="WorkWeek"></e-view>
<e-view option="Month"></e-view>
<e-view option="Agenda"></e-view>
</e-views>
</ejs-schedule>
</div>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { SchedulePlugin, Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop, ICalendarExport, ICalendarImport } from "@syncfusion/ej2-vue-schedule";
import { UploaderPlugin } from '@syncfusion/ej2-vue-inputs';
import { scheduleData } from './datasource.js';
Vue.use(UploaderPlugin);
Vue.use(SchedulePlugin);
export default {
data: function () {
return {
eventSettings: { dataSource: scheduleData },
selectedDate: new Date(2018, 1, 15),
currentView: 'Week',
cssClass:'calendar-import',
multiple: false,
extensions: '.ics',
buttons: {
browse: 'Choose file',
},
showFileList: false,
}
},
provide: {
schedule: [Day, Week, WorkWeek, Month, Agenda, Resize, DragAndDrop, ICalendarExport, ICalendarImport]
},
methods: {
onSelect: function (args) {
let scheduleObj = document.getElementById('Schedule').ej2_instances[0];
scheduleObj.importICalendar(args.event.target.files[0]);
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-schedule/styles/material.css";
.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>
define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.scheduleData = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 1, 11, 9, 30),
EndTime: new Date(2018, 1, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 1, 12, 12, 0),
EndTime: new Date(2018, 1, 12, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 1, 13, 9, 30),
EndTime: new Date(2018, 1, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 1, 14, 13, 0),
EndTime: new Date(2018, 1, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 1, 15, 12, 0),
EndTime: new Date(2018, 1, 15, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 1, 15, 9, 30),
EndTime: new Date(2018, 1, 15, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 1, 16, 11, 0),
EndTime: new Date(2018, 1, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
StartTime: new Date(2018, 1, 17, 9, 0),
EndTime: new Date(2018, 1, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 1, 19, 11, 0),
EndTime: new Date(2018, 1, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 1, 21, 11, 0),
EndTime: new Date(2018, 1, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 1, 22, 9, 30),
EndTime: new Date(2018, 1, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 1, 9, 10, 0),
EndTime: new Date(2018, 1, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 1, 7, 10, 30),
EndTime: new Date(2018, 1, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 1, 5, 10, 0),
EndTime: new Date(2018, 1, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 1, 20, 9, 30),
EndTime: new Date(2018, 1, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 23, 11, 0),
EndTime: new Date(2018, 1, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 1, 12, 5, 30),
EndTime: new Date(2018, 1, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 1, 12, 17, 0),
EndTime: new Date(2018, 1, 12, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 1, 15, 6, 0),
EndTime: new Date(2018, 1, 15, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 1, 15, 16, 0),
EndTime: new Date(2018, 1, 15, 18, 0),
CategoryColor: '#ea7a57'
}
];
});