The Scheduler includes wide variety of view modes with unique configuration options for each view. The available view modes are Day, Week, Work Week, Month, Year, Agenda, Month Agenda, Timeline Day, Timeline Week, Timeline Work Week and Timeline Month, Timeline Year, out of which the Week view is set as active.
To navigate between different views and dates, the navigation options are available at the Scheduler header bar. The active view option is usually highlighted by default. The date range of the active view will also be displayed at the left corner of the header bar, clicking on which will open a calendar popup for the ease of desired date selection.
By default, Scheduler displays the calendar views such as day, week, work week, month and agenda.
As the Scheduler displays week view by default, therefore to change the active view, set currentView property with the desired view name. The applicable view names that the Scheduler accepts are as follows,
It is necessary to import and inject the appropriate view modules into the application to make use of these view modes on the Scheduler. Also, it is possible to display only the desired views on the Scheduler. To define and configure specific views, use the views property.
In the following example, the Scheduler displays 4 views namely, Week, Month, TimelineWeek and TimelineMonth. The appropriate view modules are imported and injected properly to display those views on the Scheduler.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule id='Schedule' height='550px' width='100%' :selectedDate='selectedDate' :eventSettings='eventSettings'>
<e-views>
<e-view option='Week'></e-view>
<e-view option='TimelineWeek'></e-view>
<e-view option='Month'></e-view>
<e-view option='TimelineMonth'></e-view>
</e-views>
</ejs-schedule>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { scheduleData } from './datasource.js';
import { SchedulePlugin, Week, Month, TimelineViews, TimelineMonth } from '@syncfusion/ej2-vue-schedule';
Vue.use(SchedulePlugin);
export default {
data () {
return {
selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: scheduleData }
}
},
provide: {
schedule: [Week, Month, 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: 'Conference',
StartTime: new Date(2018, 1, 7, 10, 0),
EndTime: new Date(2018, 1, 7, 11, 0),
IsAllDay: false
}, {
Id: 2,
Subject: 'Meeting - 1',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 16, 12, 30),
IsAllDay: false
}, {
Id: 3,
Subject: 'Paris',
StartTime: new Date(2018, 1, 13, 12, 0),
EndTime: new Date(2018, 1, 13, 12, 30),
IsAllDay: false
}, {
Id: 4,
Subject: 'Vacation',
StartTime: new Date(2018, 1, 12, 10, 0),
EndTime: new Date(2018, 1, 12, 10, 30),
IsAllDay: false
}
];
exports.eventData = [
{
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'
},
{
Id: 21,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 0, 11, 9, 30),
EndTime: new Date(2018, 0, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 22,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 0, 12, 12, 0),
EndTime: new Date(2018, 0, 12, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 23,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 0, 13, 9, 30),
EndTime: new Date(2018, 0, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 24,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 0, 14, 13, 0),
EndTime: new Date(2018, 0, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 25,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 0, 15, 12, 0),
EndTime: new Date(2018, 0, 15, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 26,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 0, 15, 9, 30),
EndTime: new Date(2018, 0, 15, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 27,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 0, 16, 11, 0),
EndTime: new Date(2018, 0, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 28,
Subject: 'Life on Mars',
StartTime: new Date(2018, 0, 17, 9, 0),
EndTime: new Date(2018, 0, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 29,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 0, 19, 11, 0),
EndTime: new Date(2018, 0, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 30,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 0, 21, 11, 0),
EndTime: new Date(2018, 0, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 31,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 0, 22, 9, 30),
EndTime: new Date(2018, 0, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 32,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 0, 9, 10, 0),
EndTime: new Date(2018, 0, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 33,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 0, 7, 10, 30),
EndTime: new Date(2018, 0, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 34,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 0, 5, 10, 0),
EndTime: new Date(2018, 0, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 35,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 0, 20, 9, 30),
EndTime: new Date(2018, 0, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 36,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 0, 23, 11, 0),
EndTime: new Date(2018, 0, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 37,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 0, 12, 5, 30),
EndTime: new Date(2018, 0, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 38,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 0, 12, 17, 0),
EndTime: new Date(2018, 0, 12, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 39,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 0, 15, 6, 0),
EndTime: new Date(2018, 0, 15, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 40,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 0, 15, 16, 0),
EndTime: new Date(2018, 0, 15, 18, 0),
CategoryColor: '#ea7a57'
},
{
Id: 41,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 2, 11, 9, 30),
EndTime: new Date(2018, 2, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 42,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 2, 12, 12, 0),
EndTime: new Date(2018, 2, 12, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 43,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 2, 13, 9, 30),
EndTime: new Date(2018, 2, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 44,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 2, 14, 13, 0),
EndTime: new Date(2018, 2, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 45,
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: 46,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 2, 15, 9, 30),
EndTime: new Date(2018, 2, 15, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 47,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 2, 16, 11, 0),
EndTime: new Date(2018, 2, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 48,
Subject: 'Life on Mars',
StartTime: new Date(2018, 2, 17, 9, 0),
EndTime: new Date(2018, 2, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 49,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 2, 19, 11, 0),
EndTime: new Date(2018, 2, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 50,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 2, 21, 11, 0),
EndTime: new Date(2018, 2, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 51,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 2, 22, 9, 30),
EndTime: new Date(2018, 2, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 52,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 2, 9, 10, 0),
EndTime: new Date(2018, 2, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 53,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 2, 7, 10, 30),
EndTime: new Date(2018, 2, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 54,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 2, 5, 10, 0),
EndTime: new Date(2018, 2, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 55,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 2, 20, 9, 30),
EndTime: new Date(2018, 2, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 56,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 2, 23, 11, 0),
EndTime: new Date(2018, 2, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 57,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 2, 12, 5, 30),
EndTime: new Date(2018, 2, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 58,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 2, 12, 17, 0),
EndTime: new Date(2018, 2, 12, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 59,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 2, 15, 6, 0),
EndTime: new Date(2018, 2, 15, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 60,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 2, 15, 16, 0),
EndTime: new Date(2018, 2, 15, 18, 0),
CategoryColor: '#ea7a57'
}
];
});To configure Scheduler with simply 2 views, but with different configurations on each view, refer the following code example. Here, the Week view displays the dates in dd-MM-yyyy format whereas the Month view hides the weekend days and also displays it in readonly mode.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule id='Schedule' height='550px' width='100%' :selectedDate='selectedDate' :eventSettings='eventSettings'>
<e-views>
<e-view option='Week' dateFormat='dd-MMM-yyyy'></e-view>
<e-view option='Month' :showWeekend='showWeekend' readonly=true></e-view>
</e-views>
</ejs-schedule>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { scheduleData } from './datasource.js';
import { SchedulePlugin, Week, Month } from '@syncfusion/ej2-vue-schedule';
Vue.use(SchedulePlugin);
export default {
data () {
return {
selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: scheduleData },
showWeekend: false
}
},
provide: {
schedule: [Week, Month]
}
}
</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: 'Conference',
StartTime: new Date(2018, 1, 7, 10, 0),
EndTime: new Date(2018, 1, 7, 11, 0),
IsAllDay: false
}, {
Id: 2,
Subject: 'Meeting - 1',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 16, 12, 30),
IsAllDay: false
}, {
Id: 3,
Subject: 'Paris',
StartTime: new Date(2018, 1, 13, 12, 0),
EndTime: new Date(2018, 1, 13, 12, 30),
IsAllDay: false
}, {
Id: 4,
Subject: 'Vacation',
StartTime: new Date(2018, 1, 12, 10, 0),
EndTime: new Date(2018, 1, 12, 10, 30),
IsAllDay: false
}
];
exports.eventData = [
{
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'
},
{
Id: 21,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 0, 11, 9, 30),
EndTime: new Date(2018, 0, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 22,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 0, 12, 12, 0),
EndTime: new Date(2018, 0, 12, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 23,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 0, 13, 9, 30),
EndTime: new Date(2018, 0, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 24,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 0, 14, 13, 0),
EndTime: new Date(2018, 0, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 25,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 0, 15, 12, 0),
EndTime: new Date(2018, 0, 15, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 26,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 0, 15, 9, 30),
EndTime: new Date(2018, 0, 15, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 27,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 0, 16, 11, 0),
EndTime: new Date(2018, 0, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 28,
Subject: 'Life on Mars',
StartTime: new Date(2018, 0, 17, 9, 0),
EndTime: new Date(2018, 0, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 29,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 0, 19, 11, 0),
EndTime: new Date(2018, 0, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 30,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 0, 21, 11, 0),
EndTime: new Date(2018, 0, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 31,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 0, 22, 9, 30),
EndTime: new Date(2018, 0, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 32,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 0, 9, 10, 0),
EndTime: new Date(2018, 0, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 33,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 0, 7, 10, 30),
EndTime: new Date(2018, 0, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 34,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 0, 5, 10, 0),
EndTime: new Date(2018, 0, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 35,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 0, 20, 9, 30),
EndTime: new Date(2018, 0, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 36,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 0, 23, 11, 0),
EndTime: new Date(2018, 0, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 37,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 0, 12, 5, 30),
EndTime: new Date(2018, 0, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 38,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 0, 12, 17, 0),
EndTime: new Date(2018, 0, 12, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 39,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 0, 15, 6, 0),
EndTime: new Date(2018, 0, 15, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 40,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 0, 15, 16, 0),
EndTime: new Date(2018, 0, 15, 18, 0),
CategoryColor: '#ea7a57'
},
{
Id: 41,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 2, 11, 9, 30),
EndTime: new Date(2018, 2, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 42,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 2, 12, 12, 0),
EndTime: new Date(2018, 2, 12, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 43,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 2, 13, 9, 30),
EndTime: new Date(2018, 2, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 44,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 2, 14, 13, 0),
EndTime: new Date(2018, 2, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 45,
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: 46,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 2, 15, 9, 30),
EndTime: new Date(2018, 2, 15, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 47,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 2, 16, 11, 0),
EndTime: new Date(2018, 2, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 48,
Subject: 'Life on Mars',
StartTime: new Date(2018, 2, 17, 9, 0),
EndTime: new Date(2018, 2, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 49,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 2, 19, 11, 0),
EndTime: new Date(2018, 2, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 50,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 2, 21, 11, 0),
EndTime: new Date(2018, 2, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 51,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 2, 22, 9, 30),
EndTime: new Date(2018, 2, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 52,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 2, 9, 10, 0),
EndTime: new Date(2018, 2, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 53,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 2, 7, 10, 30),
EndTime: new Date(2018, 2, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 54,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 2, 5, 10, 0),
EndTime: new Date(2018, 2, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 55,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 2, 20, 9, 30),
EndTime: new Date(2018, 2, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 56,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 2, 23, 11, 0),
EndTime: new Date(2018, 2, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 57,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 2, 12, 5, 30),
EndTime: new Date(2018, 2, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 58,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 2, 12, 17, 0),
EndTime: new Date(2018, 2, 12, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 59,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 2, 15, 6, 0),
EndTime: new Date(2018, 2, 15, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 60,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 2, 15, 16, 0),
EndTime: new Date(2018, 2, 15, 18, 0),
CategoryColor: '#ea7a57'
}
];
});There are scenarios where each view may need to have different configurations. For such cases, you can define the applicable scheduler properties within the views Property for each view option as depicted in the following examples. The fields available to be used within each view options are as follows.
| Property | Type | Description | Applicable views |
|---|---|---|---|
option |
View | It accepts the Scheduler view name, based on which we can define its related properties. The view names can be Day, Week and so on. |
All views. |
isSelected |
Boolean | It acts similar to the currentView property and defines the active view of the Scheduler. |
All views. |
dateFormat |
Date | By default, Scheduler follows the date format as per the default culture assigned to it. When it is defined under specific view, only those assigned views follows this date format. | All views. |
readonly |
Boolean | When set to true, prevents the CRUD actions on the respective view under where it is defined. |
All views. |
resourceHeaderTemplate |
String | The template option which is used to customize the resource header cells on the Scheduler. It gets applied only on the views, wherever it is defined. | All views. |
dateHeaderTemplate |
String | The template option which is used to customize the date header cells and is applied only on the views, wherever it is defined. | All views. |
eventTemplate |
String | The template option to customize the events background. It will get applied to the events of the view to which it is currently being defined. | All views. |
showWeekend |
Boolean | When set to false, it hides the weekend days of a week from the views on which it is defined. |
All views. |
group |
GroupModel | Allows to set different resource grouping options on all available Scheduler view modes. | All views. |
cellTemplate |
String | The template option to customize the work cells of the Scheduler and is applied only on the views, on which it is defined. | Applicable on all views except Agenda view. |
workDays |
Number[] | It is used to set the working days on the Scheduler views. | Applicable on all views except Agenda view. |
displayName |
String | When a particular view is customized to display with different intervals, this property allows the user to set different display name for each of the views. | Applicable on all views except Agenda and Month Agenda. |
interval |
Number | It allows to customize the default Scheduler views with different set of days, weeks, work weeks or months on the applicable view type. | Applicable on all views except Agenda and Month Agenda. |
startHour |
String | It is used to specify the start hour, from which the Scheduler should be displayed. It accepts the time string in a short skeleton format and also, hides the time beyond the specified start time. | Applicable on Day, Week, Work Week, Timeline Day, Timeline Week and Timeline Work Week views. |
endHour |
String | It is used to specify the end hour, at which the Scheduler ends. It accepts the time string in a short skeleton format. | Applicable on Day, Week, Work Week, Timeline Day, Timeline Week, and Timeline Work Week views. |
timeScale |
TimeScaleModel | Allows to set different timescale configuration on each applicable view modes. | Applicable on Day, Week, Work Week, Timeline Day, Timeline Week, and Timeline Work Week views. |
showWeekNumber |
Boolean | When set to true, shows the week number on the respective weeks. |
Applicable on Day, Week, Work Week, and Month views. |
allowVirtualScrolling |
Boolean | It is used to enable or disable the virtual scrolling functionality. | Applicable on Agenda and Timeline views. |
headerRows |
HeaderRowsModel | Allows defining the custom header rows on timeline views of the Scheduler to display the year, month, week, date and hour label as an individual row. | Applicable only on all timeline views. |
Usually a day view displays a single day with all its related appointments. It is possible to customize the day view to display more number of days by extending the views property with interval option. You can also define any of the above defined properties within the views object definition as depicted in the following code example.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule id='Schedule' height='550px' width='100%' :selectedDate='selectedDate' :eventSettings='eventSettings' :currentView='currentView'>
<e-views>
<e-view option='Day' startHour='09:30' endHour='18:00' :timeScale='timeScale'></e-view>
</e-views>
</ejs-schedule>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { scheduleData } from './datasource.js';
import { SchedulePlugin, Day } from '@syncfusion/ej2-vue-schedule';
Vue.use(SchedulePlugin);
export default {
data () {
return {
selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: scheduleData },
currentView: 'Day',
timeScale: {enable: true, slotCount: 5}
}
},
provide: {
schedule: [Day]
}
}
</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: 'Conference',
StartTime: new Date(2018, 1, 7, 10, 0),
EndTime: new Date(2018, 1, 7, 11, 0),
IsAllDay: false
}, {
Id: 2,
Subject: 'Meeting - 1',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 16, 12, 30),
IsAllDay: false
}, {
Id: 3,
Subject: 'Paris',
StartTime: new Date(2018, 1, 13, 12, 0),
EndTime: new Date(2018, 1, 13, 12, 30),
IsAllDay: false
}, {
Id: 4,
Subject: 'Vacation',
StartTime: new Date(2018, 1, 12, 10, 0),
EndTime: new Date(2018, 1, 12, 10, 30),
IsAllDay: false
}
];
exports.eventData = [
{
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'
},
{
Id: 21,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 0, 11, 9, 30),
EndTime: new Date(2018, 0, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 22,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 0, 12, 12, 0),
EndTime: new Date(2018, 0, 12, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 23,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 0, 13, 9, 30),
EndTime: new Date(2018, 0, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 24,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 0, 14, 13, 0),
EndTime: new Date(2018, 0, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 25,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 0, 15, 12, 0),
EndTime: new Date(2018, 0, 15, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 26,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 0, 15, 9, 30),
EndTime: new Date(2018, 0, 15, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 27,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 0, 16, 11, 0),
EndTime: new Date(2018, 0, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 28,
Subject: 'Life on Mars',
StartTime: new Date(2018, 0, 17, 9, 0),
EndTime: new Date(2018, 0, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 29,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 0, 19, 11, 0),
EndTime: new Date(2018, 0, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 30,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 0, 21, 11, 0),
EndTime: new Date(2018, 0, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 31,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 0, 22, 9, 30),
EndTime: new Date(2018, 0, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 32,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 0, 9, 10, 0),
EndTime: new Date(2018, 0, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 33,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 0, 7, 10, 30),
EndTime: new Date(2018, 0, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 34,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 0, 5, 10, 0),
EndTime: new Date(2018, 0, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 35,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 0, 20, 9, 30),
EndTime: new Date(2018, 0, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 36,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 0, 23, 11, 0),
EndTime: new Date(2018, 0, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 37,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 0, 12, 5, 30),
EndTime: new Date(2018, 0, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 38,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 0, 12, 17, 0),
EndTime: new Date(2018, 0, 12, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 39,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 0, 15, 6, 0),
EndTime: new Date(2018, 0, 15, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 40,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 0, 15, 16, 0),
EndTime: new Date(2018, 0, 15, 18, 0),
CategoryColor: '#ea7a57'
},
{
Id: 41,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 2, 11, 9, 30),
EndTime: new Date(2018, 2, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 42,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 2, 12, 12, 0),
EndTime: new Date(2018, 2, 12, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 43,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 2, 13, 9, 30),
EndTime: new Date(2018, 2, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 44,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 2, 14, 13, 0),
EndTime: new Date(2018, 2, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 45,
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: 46,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 2, 15, 9, 30),
EndTime: new Date(2018, 2, 15, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 47,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 2, 16, 11, 0),
EndTime: new Date(2018, 2, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 48,
Subject: 'Life on Mars',
StartTime: new Date(2018, 2, 17, 9, 0),
EndTime: new Date(2018, 2, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 49,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 2, 19, 11, 0),
EndTime: new Date(2018, 2, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 50,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 2, 21, 11, 0),
EndTime: new Date(2018, 2, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 51,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 2, 22, 9, 30),
EndTime: new Date(2018, 2, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 52,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 2, 9, 10, 0),
EndTime: new Date(2018, 2, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 53,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 2, 7, 10, 30),
EndTime: new Date(2018, 2, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 54,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 2, 5, 10, 0),
EndTime: new Date(2018, 2, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 55,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 2, 20, 9, 30),
EndTime: new Date(2018, 2, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 56,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 2, 23, 11, 0),
EndTime: new Date(2018, 2, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 57,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 2, 12, 5, 30),
EndTime: new Date(2018, 2, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 58,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 2, 12, 17, 0),
EndTime: new Date(2018, 2, 12, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 59,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 2, 15, 6, 0),
EndTime: new Date(2018, 2, 15, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 60,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 2, 15, 16, 0),
EndTime: new Date(2018, 2, 15, 18, 0),
CategoryColor: '#ea7a57'
}
];
});All the above defined properties can be accessed within Day view except
allowVirtualScrollingandheaderRows.
The Week view displays a count of 7 days (from Sunday to Saturday) with all its related appointments. The first day of the week can be changed using the firstDayOfWeek which accepts the integer (Sunday=0, Monday=1, Tuesday=2 and so on) value. You can navigate to a particular date in day view from the week view by clicking on the appropriate dates on the date header bar.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule id='Schedule' height='550px' width='100%' :selectedDate='selectedDate' :eventSettings='eventSettings'>
<e-views>
<e-view option='Day' interval=2 displayName='2 Days' startHour='09:30'
endHour='18:00' timeScale='timeScale'></e-view>
<e-view option='Week' displayName='2 Weeks' interval=2 :showWeekend='showWeekend' isSelected= true></e-view>
</e-views>
</ejs-schedule>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { scheduleData } from './datasource.js';
import { SchedulePlugin, Day, Week } from '@syncfusion/ej2-vue-schedule';
Vue.use(SchedulePlugin);
export default {
data () {
return {
selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: scheduleData },
timeScale: {enable: true, slotCount: 5},
showWeekend: false
}
},
provide: {
schedule: [Day, Week]
}
}
</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: 'Conference',
StartTime: new Date(2018, 1, 7, 10, 0),
EndTime: new Date(2018, 1, 7, 11, 0),
IsAllDay: false
}, {
Id: 2,
Subject: 'Meeting - 1',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 16, 12, 30),
IsAllDay: false
}, {
Id: 3,
Subject: 'Paris',
StartTime: new Date(2018, 1, 13, 12, 0),
EndTime: new Date(2018, 1, 13, 12, 30),
IsAllDay: false
}, {
Id: 4,
Subject: 'Vacation',
StartTime: new Date(2018, 1, 12, 10, 0),
EndTime: new Date(2018, 1, 12, 10, 30),
IsAllDay: false
}
];
exports.eventData = [
{
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'
},
{
Id: 21,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 0, 11, 9, 30),
EndTime: new Date(2018, 0, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 22,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 0, 12, 12, 0),
EndTime: new Date(2018, 0, 12, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 23,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 0, 13, 9, 30),
EndTime: new Date(2018, 0, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 24,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 0, 14, 13, 0),
EndTime: new Date(2018, 0, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 25,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 0, 15, 12, 0),
EndTime: new Date(2018, 0, 15, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 26,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 0, 15, 9, 30),
EndTime: new Date(2018, 0, 15, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 27,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 0, 16, 11, 0),
EndTime: new Date(2018, 0, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 28,
Subject: 'Life on Mars',
StartTime: new Date(2018, 0, 17, 9, 0),
EndTime: new Date(2018, 0, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 29,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 0, 19, 11, 0),
EndTime: new Date(2018, 0, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 30,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 0, 21, 11, 0),
EndTime: new Date(2018, 0, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 31,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 0, 22, 9, 30),
EndTime: new Date(2018, 0, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 32,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 0, 9, 10, 0),
EndTime: new Date(2018, 0, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 33,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 0, 7, 10, 30),
EndTime: new Date(2018, 0, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 34,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 0, 5, 10, 0),
EndTime: new Date(2018, 0, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 35,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 0, 20, 9, 30),
EndTime: new Date(2018, 0, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 36,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 0, 23, 11, 0),
EndTime: new Date(2018, 0, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 37,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 0, 12, 5, 30),
EndTime: new Date(2018, 0, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 38,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 0, 12, 17, 0),
EndTime: new Date(2018, 0, 12, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 39,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 0, 15, 6, 0),
EndTime: new Date(2018, 0, 15, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 40,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 0, 15, 16, 0),
EndTime: new Date(2018, 0, 15, 18, 0),
CategoryColor: '#ea7a57'
},
{
Id: 41,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 2, 11, 9, 30),
EndTime: new Date(2018, 2, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 42,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 2, 12, 12, 0),
EndTime: new Date(2018, 2, 12, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 43,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 2, 13, 9, 30),
EndTime: new Date(2018, 2, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 44,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 2, 14, 13, 0),
EndTime: new Date(2018, 2, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 45,
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: 46,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 2, 15, 9, 30),
EndTime: new Date(2018, 2, 15, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 47,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 2, 16, 11, 0),
EndTime: new Date(2018, 2, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 48,
Subject: 'Life on Mars',
StartTime: new Date(2018, 2, 17, 9, 0),
EndTime: new Date(2018, 2, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 49,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 2, 19, 11, 0),
EndTime: new Date(2018, 2, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 50,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 2, 21, 11, 0),
EndTime: new Date(2018, 2, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 51,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 2, 22, 9, 30),
EndTime: new Date(2018, 2, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 52,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 2, 9, 10, 0),
EndTime: new Date(2018, 2, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 53,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 2, 7, 10, 30),
EndTime: new Date(2018, 2, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 54,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 2, 5, 10, 0),
EndTime: new Date(2018, 2, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 55,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 2, 20, 9, 30),
EndTime: new Date(2018, 2, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 56,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 2, 23, 11, 0),
EndTime: new Date(2018, 2, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 57,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 2, 12, 5, 30),
EndTime: new Date(2018, 2, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 58,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 2, 12, 17, 0),
EndTime: new Date(2018, 2, 12, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 59,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 2, 15, 6, 0),
EndTime: new Date(2018, 2, 15, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 60,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 2, 15, 16, 0),
EndTime: new Date(2018, 2, 15, 18, 0),
CategoryColor: '#ea7a57'
}
];
});All the above defined properties in the table can be accessed within Week and Work week views except
allowVirtualScrollingandheaderRows.
The Work week view displays only the working days of a week (count of 5 days) and its associated appointments. It is possible to customize the working days on the work week view by using the workDays property which accepts an array of integer values (such as Sunday=0, Monday=1, Tuesday=2 and so on). By default, it displays from Monday to Friday (5 days). You can also navigate to a particular date in the day view from the work week view by clicking on the appropriate dates in the date header bar.
The following code example depicts how to change the working days only on the Work Week view of the Scheduler.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule id='Schedule' height='550px' width='100%' :selectedDate='selectedDate' :eventSettings='eventSettings'>
<e-views>
<e-view option='WorkWeek' :workDays='workDays'></e-view>
</e-views>
</ejs-schedule>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { scheduleData } from './datasource.js';
import { SchedulePlugin, WorkWeek } from '@syncfusion/ej2-vue-schedule';
Vue.use(SchedulePlugin);
export default {
data () {
return {
selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: scheduleData },
workDays: [2,3,5]
}
},
provide: {
schedule: [WorkWeek]
}
}
</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: 'Conference',
StartTime: new Date(2018, 1, 7, 10, 0),
EndTime: new Date(2018, 1, 7, 11, 0),
IsAllDay: false
}, {
Id: 2,
Subject: 'Meeting - 1',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 16, 12, 30),
IsAllDay: false
}, {
Id: 3,
Subject: 'Paris',
StartTime: new Date(2018, 1, 13, 12, 0),
EndTime: new Date(2018, 1, 13, 12, 30),
IsAllDay: false
}, {
Id: 4,
Subject: 'Vacation',
StartTime: new Date(2018, 1, 12, 10, 0),
EndTime: new Date(2018, 1, 12, 10, 30),
IsAllDay: false
}
];
exports.eventData = [
{
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'
},
{
Id: 21,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 0, 11, 9, 30),
EndTime: new Date(2018, 0, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 22,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 0, 12, 12, 0),
EndTime: new Date(2018, 0, 12, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 23,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 0, 13, 9, 30),
EndTime: new Date(2018, 0, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 24,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 0, 14, 13, 0),
EndTime: new Date(2018, 0, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 25,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 0, 15, 12, 0),
EndTime: new Date(2018, 0, 15, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 26,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 0, 15, 9, 30),
EndTime: new Date(2018, 0, 15, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 27,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 0, 16, 11, 0),
EndTime: new Date(2018, 0, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 28,
Subject: 'Life on Mars',
StartTime: new Date(2018, 0, 17, 9, 0),
EndTime: new Date(2018, 0, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 29,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 0, 19, 11, 0),
EndTime: new Date(2018, 0, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 30,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 0, 21, 11, 0),
EndTime: new Date(2018, 0, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 31,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 0, 22, 9, 30),
EndTime: new Date(2018, 0, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 32,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 0, 9, 10, 0),
EndTime: new Date(2018, 0, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 33,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 0, 7, 10, 30),
EndTime: new Date(2018, 0, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 34,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 0, 5, 10, 0),
EndTime: new Date(2018, 0, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 35,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 0, 20, 9, 30),
EndTime: new Date(2018, 0, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 36,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 0, 23, 11, 0),
EndTime: new Date(2018, 0, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 37,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 0, 12, 5, 30),
EndTime: new Date(2018, 0, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 38,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 0, 12, 17, 0),
EndTime: new Date(2018, 0, 12, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 39,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 0, 15, 6, 0),
EndTime: new Date(2018, 0, 15, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 40,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 0, 15, 16, 0),
EndTime: new Date(2018, 0, 15, 18, 0),
CategoryColor: '#ea7a57'
},
{
Id: 41,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 2, 11, 9, 30),
EndTime: new Date(2018, 2, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 42,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 2, 12, 12, 0),
EndTime: new Date(2018, 2, 12, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 43,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 2, 13, 9, 30),
EndTime: new Date(2018, 2, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 44,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 2, 14, 13, 0),
EndTime: new Date(2018, 2, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 45,
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: 46,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 2, 15, 9, 30),
EndTime: new Date(2018, 2, 15, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 47,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 2, 16, 11, 0),
EndTime: new Date(2018, 2, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 48,
Subject: 'Life on Mars',
StartTime: new Date(2018, 2, 17, 9, 0),
EndTime: new Date(2018, 2, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 49,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 2, 19, 11, 0),
EndTime: new Date(2018, 2, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 50,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 2, 21, 11, 0),
EndTime: new Date(2018, 2, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 51,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 2, 22, 9, 30),
EndTime: new Date(2018, 2, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 52,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 2, 9, 10, 0),
EndTime: new Date(2018, 2, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 53,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 2, 7, 10, 30),
EndTime: new Date(2018, 2, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 54,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 2, 5, 10, 0),
EndTime: new Date(2018, 2, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 55,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 2, 20, 9, 30),
EndTime: new Date(2018, 2, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 56,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 2, 23, 11, 0),
EndTime: new Date(2018, 2, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 57,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 2, 12, 5, 30),
EndTime: new Date(2018, 2, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 58,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 2, 12, 17, 0),
EndTime: new Date(2018, 2, 12, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 59,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 2, 15, 6, 0),
EndTime: new Date(2018, 2, 15, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 60,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 2, 15, 16, 0),
EndTime: new Date(2018, 2, 15, 18, 0),
CategoryColor: '#ea7a57'
}
];
});The Week, Work week and Day views can display the all-day row appointments in a separate all-day row with an expand/collapse option to view it.
A Month view displays the entire days of a particular month and all its related appointments. You can navigate to a particular date in the day view by clicking on the appropriate date text on the month cells.
By default, when you try to create an appointment through Month view, it is considered as created for an entire day. You can explicitly change this behavior by unchecking the All-day option from editor window, so that it defaults to the start time duration as 9.00 AM and end time as 9.30 AM.
You can also have the + more text indicator on each day cell of a Month view, clicking on which will allows you to view the hidden appointments of a day.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule id='Schedule' height='550px' width='100%' :selectedDate='selectedDate' :eventSettings='eventSettings'>
<e-views>
<e-view option='Month' showWeekNumber=true readonly=true ></e-view>
</e-views>
</ejs-schedule>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { scheduleData } from './datasource.js';
import { SchedulePlugin, Month } from '@syncfusion/ej2-vue-schedule';
Vue.use(SchedulePlugin);
export default {
data () {
return {
selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: scheduleData }
}
},
provide: {
schedule: [Month]
}
}
</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: 'Conference',
StartTime: new Date(2018, 1, 7, 10, 0),
EndTime: new Date(2018, 1, 7, 11, 0),
IsAllDay: false
}, {
Id: 2,
Subject: 'Meeting - 1',
StartTime: new Date(2018, 1, 15, 10, 0),
EndTime: new Date(2018, 1, 16, 12, 30),
IsAllDay: false
}, {
Id: 3,
Subject: 'Paris',
StartTime: new Date(2018, 1, 13, 12, 0),
EndTime: new Date(2018, 1, 13, 12, 30),
IsAllDay: false
}, {
Id: 4,
Subject: 'Vacation',
StartTime: new Date(2018, 1, 12, 10, 0),
EndTime: new Date(2018, 1, 12, 10, 30),
IsAllDay: false
}
];
exports.eventData = [
{
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'
},
{
Id: 21,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 0, 11, 9, 30),
EndTime: new Date(2018, 0, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 22,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 0, 12, 12, 0),
EndTime: new Date(2018, 0, 12, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 23,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 0, 13, 9, 30),
EndTime: new Date(2018, 0, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 24,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 0, 14, 13, 0),
EndTime: new Date(2018, 0, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 25,
Subject: 'Milky Way as Melting pot',
StartTime: new Date(2018, 0, 15, 12, 0),
EndTime: new Date(2018, 0, 15, 14, 0),
CategoryColor: '#00bdae'
}, {
Id: 26,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 0, 15, 9, 30),
EndTime: new Date(2018, 0, 15, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 27,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 0, 16, 11, 0),
EndTime: new Date(2018, 0, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 28,
Subject: 'Life on Mars',
StartTime: new Date(2018, 0, 17, 9, 0),
EndTime: new Date(2018, 0, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 29,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 0, 19, 11, 0),
EndTime: new Date(2018, 0, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 30,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 0, 21, 11, 0),
EndTime: new Date(2018, 0, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 31,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 0, 22, 9, 30),
EndTime: new Date(2018, 0, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 32,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 0, 9, 10, 0),
EndTime: new Date(2018, 0, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 33,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 0, 7, 10, 30),
EndTime: new Date(2018, 0, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 34,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 0, 5, 10, 0),
EndTime: new Date(2018, 0, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 35,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 0, 20, 9, 30),
EndTime: new Date(2018, 0, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 36,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 0, 23, 11, 0),
EndTime: new Date(2018, 0, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 37,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 0, 12, 5, 30),
EndTime: new Date(2018, 0, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 38,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 0, 12, 17, 0),
EndTime: new Date(2018, 0, 12, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 39,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 0, 15, 6, 0),
EndTime: new Date(2018, 0, 15, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 40,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 0, 15, 16, 0),
EndTime: new Date(2018, 0, 15, 18, 0),
CategoryColor: '#ea7a57'
},
{
Id: 41,
Subject: 'Explosion of Betelgeuse Star',
StartTime: new Date(2018, 2, 11, 9, 30),
EndTime: new Date(2018, 2, 11, 11, 0),
CategoryColor: '#1aaa55'
}, {
Id: 42,
Subject: 'Thule Air Crash Report',
StartTime: new Date(2018, 2, 12, 12, 0),
EndTime: new Date(2018, 2, 12, 14, 0),
CategoryColor: '#357cd2'
}, {
Id: 43,
Subject: 'Blue Moon Eclipse',
StartTime: new Date(2018, 2, 13, 9, 30),
EndTime: new Date(2018, 2, 13, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 44,
Subject: 'Meteor Showers in 2018',
StartTime: new Date(2018, 2, 14, 13, 0),
EndTime: new Date(2018, 2, 14, 14, 30),
CategoryColor: '#ea7a57'
}, {
Id: 45,
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: 46,
Subject: 'Mysteries of Bermuda Triangle',
StartTime: new Date(2018, 2, 15, 9, 30),
EndTime: new Date(2018, 2, 15, 11, 0),
CategoryColor: '#f57f17'
}, {
Id: 47,
Subject: 'Glaciers and Snowflakes',
StartTime: new Date(2018, 2, 16, 11, 0),
EndTime: new Date(2018, 2, 16, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 48,
Subject: 'Life on Mars',
StartTime: new Date(2018, 2, 17, 9, 0),
EndTime: new Date(2018, 2, 17, 10, 0),
CategoryColor: '#357cd2'
}, {
Id: 49,
Subject: 'Alien Civilization',
StartTime: new Date(2018, 2, 19, 11, 0),
EndTime: new Date(2018, 2, 19, 13, 0),
CategoryColor: '#7fa900'
}, {
Id: 50,
Subject: 'Wildlife Galleries',
StartTime: new Date(2018, 2, 21, 11, 0),
EndTime: new Date(2018, 2, 21, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 51,
Subject: 'Best Photography 2018',
StartTime: new Date(2018, 2, 22, 9, 30),
EndTime: new Date(2018, 2, 22, 11, 0),
CategoryColor: '#00bdae'
}, {
Id: 52,
Subject: 'Smarter Puppies',
StartTime: new Date(2018, 2, 9, 10, 0),
EndTime: new Date(2018, 2, 9, 11, 30),
CategoryColor: '#f57f17'
}, {
Id: 53,
Subject: 'Myths of Andromeda Galaxy',
StartTime: new Date(2018, 2, 7, 10, 30),
EndTime: new Date(2018, 2, 7, 12, 30),
CategoryColor: '#1aaa55'
}, {
Id: 54,
Subject: 'Aliens vs Humans',
StartTime: new Date(2018, 2, 5, 10, 0),
EndTime: new Date(2018, 2, 5, 11, 30),
CategoryColor: '#357cd2'
}, {
Id: 55,
Subject: 'Facts of Humming Birds',
StartTime: new Date(2018, 2, 20, 9, 30),
EndTime: new Date(2018, 2, 20, 11, 0),
CategoryColor: '#7fa900'
}, {
Id: 56,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 2, 23, 11, 0),
EndTime: new Date(2018, 2, 23, 13, 0),
CategoryColor: '#ea7a57'
}, {
Id: 57,
Subject: 'The Cycle of Seasons',
StartTime: new Date(2018, 2, 12, 5, 30),
EndTime: new Date(2018, 2, 12, 7, 30),
CategoryColor: '#00bdae'
}, {
Id: 58,
Subject: 'Space Galaxies and Planets',
StartTime: new Date(2018, 2, 12, 17, 0),
EndTime: new Date(2018, 2, 12, 18, 30),
CategoryColor: '#f57f17'
}, {
Id: 59,
Subject: 'Lifecycle of Bumblebee',
StartTime: new Date(2018, 2, 15, 6, 0),
EndTime: new Date(2018, 2, 15, 7, 30),
CategoryColor: '#7fa900'
}, {
Id: 60,
Subject: 'Sky Gazers',
StartTime: new Date(2018, 2, 15, 16, 0),
EndTime: new Date(2018, 2, 15, 18, 0),
CategoryColor: '#ea7a57'
}
];
});A Year view displays all the days of a particular year with months and all its related appointments. You can navigate to a particular date in the day view by clicking on the appropriate date text on the year cells.
Year view is available in both the Horizontal and Vertical orientations. You can manage the orientation of year view through views property.
<template>
<div id='app'>
<div id='container'>
<ejs-schedule id='Schedule' height='550px' width='100%' :selectedDate='selectedDate' :eventSettings='eventSettings'>
<e-views>
<e-view option='Year' showWeekNumber=true readonly=true ></e-view>
</e-views>
</ejs-schedule>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { scheduleData } from './datasource.js';
import { SchedulePlugin, Year } from '@syncfusion/ej2-vue-schedule';
Vue.use(SchedulePlugin);
export default {
data () {
return {
selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: scheduleData }
}
},
provide: {
schedule: [Year]
}
}
</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 =