<template>
<div id="app">
<div id="container">
<ejs-schedule
height="550px"
:selectedDate="selectedDate"
:eventSettings="eventSettings"
>
<e-views>
<e-view option="Day"></e-view>
<e-view option="Week"></e-view>
<e-view option="WorkWeek"></e-view>
<e-view option="Month"></e-view>
</e-views>
</ejs-schedule>
</div>
</div>
</template>
<script>
import Vue from "vue";
import { L10n, loadCldr, setCulture } from "@syncfusion/ej2-base";
import {
SchedulePlugin,
Day,
Week,
WorkWeek,
Month
} from "@syncfusion/ej2-vue-schedule";
import * as localeText from "./locale.json";
import * as numberingSystems from "cldr-data/supplemental/numberingSystems.json";
import * as gregorian from "cldr-data/main/nl/ca-gregorian.json";
import * as numbers from "cldr-data/main/nl/numbers.json";
import * as timeZoneNames from "cldr-data/main/nl/timeZoneNames.json";
Vue.use(SchedulePlugin);
L10n.load(localeText);
loadCldr(numberingSystems, gregorian, numbers, timeZoneNames);
setCulture('nl');
export default {
data() {
return {
height: "550px",
selectedDate: new Date(2018, 5, 4),
eventSettings: {
dataSource: [
{
Id: 1,
Subject: "Burning Man",
StartTime: new Date(2018, 5, 5, 15, 0),
EndTime: new Date(2018, 5, 5, 17, 0)
},
{
Id: 2,
Subject: "Data-Driven Economy",
StartTime: new Date(2018, 5, 4, 12, 0),
EndTime: new Date(2018, 5, 4, 14, 0)
},
{
Id: 3,
Subject: "Techweek",
StartTime: new Date(2018, 5, 4, 15, 0),
EndTime: new Date(2018, 5, 4, 17, 0)
}
]
}
};
},
provide: {
schedule: [Day, Week, WorkWeek, Month]
}
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
</style>
