The Timeline views can have additional header rows other than its default date and time header rows. It is possible to show individual header rows for displaying year, month and week separately using the headerRows
property. This property is applicable only on the timeline views. The possible rows which can be added using headerRows
property are as follows.
Year
Month
Week
Date
Hour
The
Hour
row is not applicable for Timeline month view.
The following example shows the Scheduler displaying all the available header rows on timeline views.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :selectedDate='selectedDate' :eventSettings='eventSettings' :views='views' :startHour='startHour' :endHour='endHour' :headerRows='headerRows'></ejs-schedule>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { SchedulePlugin, TimelineViews } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';
Vue.use(SchedulePlugin);
export default {
data (){
return {
height: '550px',
width: '100%',
startHour: '09:00',
endHour: '13:00',
headerRows: [
{ option: 'Year' },
{ option: 'Month' },
{ option: 'Week' },
{ option: 'Date' },
{ option: 'Hour' }
],
views: ['TimelineWeek'],
selectedDate: new Date(2018, 11, 31),
eventSettings: { dataSource: scheduleData }
}
},
provide: {
schedule: [TimelineViews]
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css";
</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(2019, 0, 1, 9, 30),
EndTime: new Date(2019, 0, 1, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2019, 0, 2, 12, 0),
EndTime: new Date(2019, 0, 2, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2019, 0, 3, 9, 30),
EndTime: new Date(2019, 0, 3, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2019, 0, 1, 13, 0),
EndTime: new Date(2019, 0, 1, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 11, 31, 12, 0),
EndTime: new Date(2018, 11, 31, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 11, 31, 9, 30),
EndTime: new Date(2018, 11, 31, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 11, 26, 11, 0),
EndTime: new Date(2018, 11, 26, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
StartTime: new Date(2018, 11, 25, 9, 0),
EndTime: new Date(2018, 11, 25, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 11, 27, 11, 0),
EndTime: new Date(2018, 11, 27, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 11, 29, 11, 0),
EndTime: new Date(2018, 11, 29, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 11, 30, 9, 30),
EndTime: new Date(2018, 11, 30, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 11, 29, 10, 0),
EndTime: new Date(2018, 11, 29, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 11, 28, 10, 30),
EndTime: new Date(2018, 11, 28, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 0, 5, 10, 0),
EndTime: new Date(2018, 0, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 0, 10, 9, 30),
EndTime: new Date(2018, 0, 10, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 11, 23, 11, 0),
EndTime: new Date(2018, 11, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 0, 2, 5, 30),
EndTime: new Date(2018, 0, 2, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 0, 4, 17, 0),
EndTime: new Date(2018, 0, 4, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 11, 31, 6, 0),
EndTime: new Date(2018, 11, 31, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 11, 31, 16, 0),
EndTime: new Date(2018, 11, 31, 18, 0),
CategoryColor: '#ea7a57'
}
];
exports.eventData = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 5, 11, 9, 30),
EndTime: new Date(2018, 5, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 6, 2, 12, 0),
EndTime: new Date(2018, 6, 2, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 2, 13, 9, 30),
EndTime: new Date(2018, 2, 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, 0, 7, 12, 0),
EndTime: new Date(2018, 0, 7, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 0, 5, 9, 30),
EndTime: new Date(2018, 0, 5, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 2, 16, 11, 0),
EndTime: new Date(2018, 2, 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, 3, 21, 11, 0),
EndTime: new Date(2018, 3, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 4, 22, 9, 30),
EndTime: new Date(2018, 4, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2017, 11, 9, 10, 0),
EndTime: new Date(2017, 11, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2017, 11, 7, 10, 30),
EndTime: new Date(2017, 11, 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, 2, 2, 11, 0),
EndTime: new Date(2018, 2, 2, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 1, 2, 5, 30),
EndTime: new Date(2018, 1, 2, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 1, 3, 17, 0),
EndTime: new Date(2018, 1, 3, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 0, 3, 6, 0),
EndTime: new Date(2018, 0, 3, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 0, 2, 16, 0),
EndTime: new Date(2018, 0, 2, 18, 0),
CategoryColor: '#ea7a57'
}
];
});
To display the timeline Scheduler simply with year and month names alone, define the option Year
and Month
within the headerRows
property.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :selectedDate='selectedDate' :eventSettings='eventSettings' :views='views' :currentView='currentView' :headerRows='headerRows'></ejs-schedule>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { SchedulePlugin, TimelineMonth } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';
Vue.use(SchedulePlugin);
export default {
data (){
return {
width: '100%',
height: '550px',
selectedDate: new Date(2018, 11, 31),
headerRows: [{ option: 'Year' }, { option: 'Month' }],
currentView: 'TimelineMonth',
views: [{ option: 'TimelineMonth', interval: 24 }],
eventSettings: { dataSource: scheduleData }
}
},
provide: {
schedule: [TimelineMonth]
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css";
</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(2019, 0, 1, 9, 30),
EndTime: new Date(2019, 0, 1, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2019, 0, 2, 12, 0),
EndTime: new Date(2019, 0, 2, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2019, 0, 3, 9, 30),
EndTime: new Date(2019, 0, 3, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2019, 0, 1, 13, 0),
EndTime: new Date(2019, 0, 1, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 11, 31, 12, 0),
EndTime: new Date(2018, 11, 31, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 11, 31, 9, 30),
EndTime: new Date(2018, 11, 31, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 11, 26, 11, 0),
EndTime: new Date(2018, 11, 26, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
StartTime: new Date(2018, 11, 25, 9, 0),
EndTime: new Date(2018, 11, 25, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 11, 27, 11, 0),
EndTime: new Date(2018, 11, 27, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 11, 29, 11, 0),
EndTime: new Date(2018, 11, 29, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 11, 30, 9, 30),
EndTime: new Date(2018, 11, 30, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 11, 29, 10, 0),
EndTime: new Date(2018, 11, 29, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 11, 28, 10, 30),
EndTime: new Date(2018, 11, 28, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 0, 5, 10, 0),
EndTime: new Date(2018, 0, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 0, 10, 9, 30),
EndTime: new Date(2018, 0, 10, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 11, 23, 11, 0),
EndTime: new Date(2018, 11, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 0, 2, 5, 30),
EndTime: new Date(2018, 0, 2, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 0, 4, 17, 0),
EndTime: new Date(2018, 0, 4, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 11, 31, 6, 0),
EndTime: new Date(2018, 11, 31, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 11, 31, 16, 0),
EndTime: new Date(2018, 11, 31, 18, 0),
CategoryColor: '#ea7a57'
}
];
exports.eventData = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 5, 11, 9, 30),
EndTime: new Date(2018, 5, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 6, 2, 12, 0),
EndTime: new Date(2018, 6, 2, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 2, 13, 9, 30),
EndTime: new Date(2018, 2, 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, 0, 7, 12, 0),
EndTime: new Date(2018, 0, 7, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 0, 5, 9, 30),
EndTime: new Date(2018, 0, 5, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 2, 16, 11, 0),
EndTime: new Date(2018, 2, 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, 3, 21, 11, 0),
EndTime: new Date(2018, 3, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 4, 22, 9, 30),
EndTime: new Date(2018, 4, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2017, 11, 9, 10, 0),
EndTime: new Date(2017, 11, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2017, 11, 7, 10, 30),
EndTime: new Date(2017, 11, 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, 2, 2, 11, 0),
EndTime: new Date(2018, 2, 2, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 1, 2, 5, 30),
EndTime: new Date(2018, 1, 2, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 1, 3, 17, 0),
EndTime: new Date(2018, 1, 3, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 0, 3, 6, 0),
EndTime: new Date(2018, 0, 3, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 0, 2, 16, 0),
EndTime: new Date(2018, 0, 2, 18, 0),
CategoryColor: '#ea7a57'
}
];
});
The week number can be displayed in a separate header row of the timeline Scheduler by setting Week
option within headerRows
property.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :selectedDate='selectedDate' :eventSettings='eventSettings' :views='views' :currentView='currentView' :headerRows='headerRows'></ejs-schedule>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { SchedulePlugin, TimelineMonth, TimelineViews } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';
Vue.use(SchedulePlugin);
export default {
data (){
return {
width: '100%', height: '550px',
selectedDate: new Date(2018, 11, 31),
headerRows: [{ option: 'Week' }, { option: 'Date' }, { option: 'Hour' }],
currentView: 'TimelineMonth',
views: [
{ option: 'TimelineMonth', interval: 24 },
{ option: 'TimelineWeek', interval: 3 },
{ option: 'TimelineDay', interval: 4 }
],
eventSettings: { dataSource: scheduleData }
}
},
provide: {
schedule: [TimelineViews, TimelineMonth]
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css";
</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(2019, 0, 1, 9, 30),
EndTime: new Date(2019, 0, 1, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2019, 0, 2, 12, 0),
EndTime: new Date(2019, 0, 2, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2019, 0, 3, 9, 30),
EndTime: new Date(2019, 0, 3, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2019, 0, 1, 13, 0),
EndTime: new Date(2019, 0, 1, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 11, 31, 12, 0),
EndTime: new Date(2018, 11, 31, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 11, 31, 9, 30),
EndTime: new Date(2018, 11, 31, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 11, 26, 11, 0),
EndTime: new Date(2018, 11, 26, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
StartTime: new Date(2018, 11, 25, 9, 0),
EndTime: new Date(2018, 11, 25, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 11, 27, 11, 0),
EndTime: new Date(2018, 11, 27, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 11, 29, 11, 0),
EndTime: new Date(2018, 11, 29, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 11, 30, 9, 30),
EndTime: new Date(2018, 11, 30, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 11, 29, 10, 0),
EndTime: new Date(2018, 11, 29, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 11, 28, 10, 30),
EndTime: new Date(2018, 11, 28, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 0, 5, 10, 0),
EndTime: new Date(2018, 0, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 0, 10, 9, 30),
EndTime: new Date(2018, 0, 10, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 11, 23, 11, 0),
EndTime: new Date(2018, 11, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 0, 2, 5, 30),
EndTime: new Date(2018, 0, 2, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 0, 4, 17, 0),
EndTime: new Date(2018, 0, 4, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 11, 31, 6, 0),
EndTime: new Date(2018, 11, 31, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 11, 31, 16, 0),
EndTime: new Date(2018, 11, 31, 18, 0),
CategoryColor: '#ea7a57'
}
];
exports.eventData = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 5, 11, 9, 30),
EndTime: new Date(2018, 5, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 6, 2, 12, 0),
EndTime: new Date(2018, 6, 2, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 2, 13, 9, 30),
EndTime: new Date(2018, 2, 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, 0, 7, 12, 0),
EndTime: new Date(2018, 0, 7, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 0, 5, 9, 30),
EndTime: new Date(2018, 0, 5, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 2, 16, 11, 0),
EndTime: new Date(2018, 2, 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, 3, 21, 11, 0),
EndTime: new Date(2018, 3, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 4, 22, 9, 30),
EndTime: new Date(2018, 4, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2017, 11, 9, 10, 0),
EndTime: new Date(2017, 11, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2017, 11, 7, 10, 30),
EndTime: new Date(2017, 11, 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, 2, 2, 11, 0),
EndTime: new Date(2018, 2, 2, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 1, 2, 5, 30),
EndTime: new Date(2018, 1, 2, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 1, 3, 17, 0),
EndTime: new Date(2018, 1, 3, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 0, 3, 6, 0),
EndTime: new Date(2018, 0, 3, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 0, 2, 16, 0),
EndTime: new Date(2018, 0, 2, 18, 0),
CategoryColor: '#ea7a57'
}
];
});
It is possible to display a complete year in a timeline view by setting interval
value as 12 and defining TimelineMonth view option within the views
property of Scheduler.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :selectedDate='selectedDate' :eventSettings='eventSettings' :views='views' :headerRows='headerRows'></ejs-schedule>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { SchedulePlugin, TimelineMonth, TimelineViews } from '@syncfusion/ej2-vue-schedule';
import { eventData } from './datasource.js';
Vue.use(SchedulePlugin);
export default {
data (){
return {
width: '100%', height: '550px',
selectedDate: new Date(2018, 0, 1),
headerRows: [{ option: 'Month' }, { option: 'Date' }],
views: [{ option: 'TimelineMonth', interval: 12 }],
eventSettings: { dataSource: eventData }
}
},
provide: {
schedule: [TimelineMonth]
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css";
</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(2019, 0, 1, 9, 30),
EndTime: new Date(2019, 0, 1, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2019, 0, 2, 12, 0),
EndTime: new Date(2019, 0, 2, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2019, 0, 3, 9, 30),
EndTime: new Date(2019, 0, 3, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2019, 0, 1, 13, 0),
EndTime: new Date(2019, 0, 1, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 11, 31, 12, 0),
EndTime: new Date(2018, 11, 31, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 11, 31, 9, 30),
EndTime: new Date(2018, 11, 31, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 11, 26, 11, 0),
EndTime: new Date(2018, 11, 26, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
StartTime: new Date(2018, 11, 25, 9, 0),
EndTime: new Date(2018, 11, 25, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 11, 27, 11, 0),
EndTime: new Date(2018, 11, 27, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 11, 29, 11, 0),
EndTime: new Date(2018, 11, 29, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 11, 30, 9, 30),
EndTime: new Date(2018, 11, 30, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 11, 29, 10, 0),
EndTime: new Date(2018, 11, 29, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 11, 28, 10, 30),
EndTime: new Date(2018, 11, 28, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 0, 5, 10, 0),
EndTime: new Date(2018, 0, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 0, 10, 9, 30),
EndTime: new Date(2018, 0, 10, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 11, 23, 11, 0),
EndTime: new Date(2018, 11, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 0, 2, 5, 30),
EndTime: new Date(2018, 0, 2, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 0, 4, 17, 0),
EndTime: new Date(2018, 0, 4, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 11, 31, 6, 0),
EndTime: new Date(2018, 11, 31, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 11, 31, 16, 0),
EndTime: new Date(2018, 11, 31, 18, 0),
CategoryColor: '#ea7a57'
}
];
exports.eventData = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 5, 11, 9, 30),
EndTime: new Date(2018, 5, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 6, 2, 12, 0),
EndTime: new Date(2018, 6, 2, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 2, 13, 9, 30),
EndTime: new Date(2018, 2, 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, 0, 7, 12, 0),
EndTime: new Date(2018, 0, 7, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 0, 5, 9, 30),
EndTime: new Date(2018, 0, 5, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 2, 16, 11, 0),
EndTime: new Date(2018, 2, 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, 3, 21, 11, 0),
EndTime: new Date(2018, 3, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 4, 22, 9, 30),
EndTime: new Date(2018, 4, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2017, 11, 9, 10, 0),
EndTime: new Date(2017, 11, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2017, 11, 7, 10, 30),
EndTime: new Date(2017, 11, 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, 2, 2, 11, 0),
EndTime: new Date(2018, 2, 2, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 1, 2, 5, 30),
EndTime: new Date(2018, 1, 2, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 1, 3, 17, 0),
EndTime: new Date(2018, 1, 3, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 0, 3, 6, 0),
EndTime: new Date(2018, 0, 3, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 0, 2, 16, 0),
EndTime: new Date(2018, 0, 2, 18, 0),
CategoryColor: '#ea7a57'
}
];
});
You can customize the text of the header rows and display any images or formatted text on each individual header rows using the built-in template
option available within the headerRows
property.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule :height='height' :width='width' :selectedDate='selectedDate' :eventSettings='eventSettings' :views='views' :headerRows='headerRows'></ejs-schedule>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { SchedulePlugin, TimelineMonth, getWeekNumber } from '@syncfusion/ej2-vue-schedule';
import { Internationalization } from '@syncfusion/ej2-base';
import { eventData } from './datasource.js';
Vue.use(SchedulePlugin);
var instance = new Internationalization();
var yearHeaderVue = Vue.component('year-header', {
template: '<span class="year">{{getYearDetails(data)}}</span>',
data() {
return {
data: {}
};
},
methods: {
getYearDetails: function (value) {
return 'Year: ' + instance.formatDate(value.date, { skeleton: 'y' });
}
}
});
var monthHeaderVue = Vue.component('month-header', {
template: '<span class="month">{{getMonthDetails(data)}}</span>',
data() {
return {
data: {}
};
},
methods: {
getMonthDetails: function (value) {
return 'Month ' + instance.formatDate(value.date, { skeleton: 'M' });
}
}
});
var weekHeaderVue = Vue.component('week-header', {
template: '<span class="week">{{getWeekDetails(data)}}</span>',
data() {
return {
data: {}
};
},
methods: {
getWeekDetails: function (value) {
return 'Week: ' + getWeekNumber(value.date);
}
}
});
export default {
data (){
return {
width: '100%',
height: '550px',
selectedDate: new Date(2018, 0, 1),
headerRows: [
{
option: 'Year',
template: function (e) {
return {
template: yearHeaderVue
};
}
},
{
option: 'Month',
template: function (e) {
return {
template: monthHeaderVue
};
},
},
{
option: 'Week',
template: function (e) {
return {
template: weekHeaderVue
};
}
},
{ option: 'Date' }
],
views: [{ option: 'TimelineMonth' }],
eventSettings: { dataSource: eventData }
}
},
provide: {
schedule: [TimelineMonth]
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css";
</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(2019, 0, 1, 9, 30),
EndTime: new Date(2019, 0, 1, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2019, 0, 2, 12, 0),
EndTime: new Date(2019, 0, 2, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2019, 0, 3, 9, 30),
EndTime: new Date(2019, 0, 3, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 4,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2019, 0, 1, 13, 0),
EndTime: new Date(2019, 0, 1, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 5,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 11, 31, 12, 0),
EndTime: new Date(2018, 11, 31, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 11, 31, 9, 30),
EndTime: new Date(2018, 11, 31, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 11, 26, 11, 0),
EndTime: new Date(2018, 11, 26, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 8,
Subject: 'Life on Mars',
StartTime: new Date(2018, 11, 25, 9, 0),
EndTime: new Date(2018, 11, 25, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 9,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 11, 27, 11, 0),
EndTime: new Date(2018, 11, 27, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 10,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 11, 29, 11, 0),
EndTime: new Date(2018, 11, 29, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 11, 30, 9, 30),
EndTime: new Date(2018, 11, 30, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 11, 29, 10, 0),
EndTime: new Date(2018, 11, 29, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 11, 28, 10, 30),
EndTime: new Date(2018, 11, 28, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 14,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 0, 5, 10, 0),
EndTime: new Date(2018, 0, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 15,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 0, 10, 9, 30),
EndTime: new Date(2018, 0, 10, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 16,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 11, 23, 11, 0),
EndTime: new Date(2018, 11, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 0, 2, 5, 30),
EndTime: new Date(2018, 0, 2, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 0, 4, 17, 0),
EndTime: new Date(2018, 0, 4, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 11, 31, 6, 0),
EndTime: new Date(2018, 11, 31, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 11, 31, 16, 0),
EndTime: new Date(2018, 11, 31, 18, 0),
CategoryColor: '#ea7a57'
}
];
exports.eventData = [
{
Id: 1,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 5, 11, 9, 30),
EndTime: new Date(2018, 5, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 2,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 6, 2, 12, 0),
EndTime: new Date(2018, 6, 2, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 3,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 2, 13, 9, 30),
EndTime: new Date(2018, 2, 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, 0, 7, 12, 0),
EndTime: new Date(2018, 0, 7, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 6,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 0, 5, 9, 30),
EndTime: new Date(2018, 0, 5, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 7,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 2, 16, 11, 0),
EndTime: new Date(2018, 2, 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, 3, 21, 11, 0),
EndTime: new Date(2018, 3, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 11,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 4, 22, 9, 30),
EndTime: new Date(2018, 4, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 12,
Subject: 'Smarter Puppies',
StartTime: new Date(2017, 11, 9, 10, 0),
EndTime: new Date(2017, 11, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 13,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2017, 11, 7, 10, 30),
EndTime: new Date(2017, 11, 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, 2, 2, 11, 0),
EndTime: new Date(2018, 2, 2, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 17,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 1, 2, 5, 30),
EndTime: new Date(2018, 1, 2, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 18,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 1, 3, 17, 0),
EndTime: new Date(2018, 1, 3, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 19,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 0, 3, 6, 0),
EndTime: new Date(2018, 0, 3, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 20,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 0, 2, 16, 0),
EndTime: new Date(2018, 0, 2, 18, 0),
CategoryColor: '#ea7a57'
}
];
});