define week view and work week view
Answers
Answer:
A Timeline Month view displays the current month days along with its appointments. To make use of the timeline Month view on Scheduler, import and inject TimelineMonth module from the ej2-schedule package.
Source
Preview
app.vue
<template>
<div id='app'>
<div id='container'>
<ejs-schedule id='Schedule' height='550px' width='100%' :selectedDate='selectedDate' :eventSettings='eventSettings'>
<e-views>
<e-view option='TimelineMonth' :showWeekend='showWeekend'></e-view>
</e-views>
</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 {
selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: scheduleData},
showWeekend: false
}
},
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>
Clicking on the dates in the date header bar of Timeline month will allow you to navigate to the Timeline day view.
Extending view intervals
It is possible to customize the display of default number of days on different Scheduler view modes. For example, a day view can be extended to display 3 days by setting the interval option as 3 for the Day option within the views property as depicted in the following code example. In the same way, you can also display 2 weeks by setting interval 2 for the Week option.
You can provide the alternative display name for such customized views on the Scheduler header bar, by setting the appropriate displayName property.
Source
Preview
app.vue
<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' interval=3 displayName='3 Days'></e-view>
<e-view option='Week' interval=2 displayName='2 Weeks'></e-view>
</e-views>
</ejs-schedule>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { SchedulePlugin, Day, Week } from '@syncfusion/ej2-vue-schedule';
import { scheduleData } from './datasource.js';
Vue.use(SchedulePlugin);
export default {
data () {
return {
selectedDate: new Date(2018, 1, 15),
eventSettings: { dataSource: scheduleData},
currentView: 'Day'
}
},
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 "../../n