We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
If event periods overlap in syncfusion scheduler, the period will be shortened.
How do I stop overlapping in Vue's library?
The following is the implementation content.
<template>
<div class="schedule-container">
<ejs-schedule
id="Schedule"
ref="ScheduleObj"
:cssClass="cssClass"
width='100%'
height="200px"
:selectedDate='selectedDate'
:eventSettings='eventSettings'
:group='group'
:actionBegin="onActionBegin"
>
<e-views>
<e-view option="TimelineMonth" :eventTemplate="monthTemplate" :allowVirtualScrolling="virtualScroll"></e-view>
</e-views>
<e-resources>
<e-resource
field='ResourceId'
title='Reosurce'
name='Resources'
allowMultiple=true
:dataSource='resourceData'
textField='Text'
idField='Id'
colorField='Color'>
</e-resource>
</e-resources>
</ejs-schedule>
</div>
</template>
<script>
import Vue from 'vue';
import { extend } from '@syncfusion/ej2-base';
import { SchedulePlugin, TimelineMonth, DragAndDrop, Resize } from '@syncfusion/ej2-vue-schedule';
import RowTemplate from './RowTemplate';
Vue.use(SchedulePlugin);
export default Vue.extend({
data() {
return {
selectedDate: new Date(2018, 5, 1),
cssClass: 'virtual-scroll',
virtualScroll: true,
monthTemplate: (e) => {
return {
template: RowTemplate
};
},
group: {
resources: ['Resources']
},
resourceData: this.generateResourceData(1, 2, 'RESOURCE'),
eventSettings: { dataSource: this.generateEvents() }
};
},
provide: {
schedule: [TimelineMonth, DragAndDrop, Resize]
},
methods: {
onActionBegin(args) { // eventCreate dose not occur
if (args.requestType === "eventCreate") {
args.cancel = true;
}
},
generateResourceData(start, end, name) {
const colors = ['#ff8787', '#9775fa', '#748ffc'];
let datas = [];
for (let n = start; n <= end; n++) {
datas.push({
Id: n,
Text: name + ' ' + n,
Color: colors[n - 1]
});
}
return datas;
},
generateEvents() {
let datas = [
{
Id: 1,
Subject: 'a',
StartTime: new Date(2018, 5, 1, 0, 0),
EndTime: new Date(2018, 5, 2, 24, 0),
ResourceId: 1,
Color: '#008000'
},
{
Id: 2,
Subject: 'b',
StartTime: new Date(2018, 5, 2, 0, 0),
EndTime: new Date(2018, 5, 3, 24, 0),
ResourceId: 1,
Color: '#d2691e'
},
{
Id: 3,
Subject: 'c',
StartTime: new Date(2018, 5, 4, 13, 30),
EndTime: new Date(2018, 5, 7, 15, 0),
ResourceId: 1,
Color: '#c0c0c0'
},
{
Id: 4,
Subject: 'd',
StartTime: new Date(2018, 5, 8, 0, 0),
EndTime: new Date(2018, 5, 9, 24, 0),
ResourceId: 1,
Color: '#ffa500'
},
{
Id: 5,
Subject: 'e',
StartTime: new Date(2018, 5, 10, 13, 30),
EndTime: new Date(2018, 5, 12, 15, 0),
ResourceId: 1,
Color: '#4169e1'
},
{
Id: 6,
Subject: 'a',
StartTime: new Date(2018, 5, 3, 15, 0),
EndTime: new Date(2018, 5, 4, 13, 0),
ResourceId: 2,
Color: '#008000'
},
{
Id: 7,
Subject: 'b',
StartTime: new Date(2018, 5, 5, 9, 30),
EndTime: new Date(2018, 5, 6, 11, 0),
ResourceId: 2,
Color: '#d2691e'
},
{
Id: 8,
Subject: 'c',
StartTime: new Date(2018, 5, 7, 13, 0),
EndTime: new Date(2018, 5, 11, 14, 30),
ResourceId: 2,
Color: '#c0c0c0'
},
{
Id: 9,
Subject: 'd',
StartTime: new Date(2018, 5, 12, 9, 30),
EndTime: new Date(2018, 5, 14, 11, 0),
ResourceId: 2,
Color: '#ffa500'
},
{
Id: 10,
Subject: 'e"',
StartTime: new Date(2018, 5, 15, 13, 0),
EndTime: new Date(2018, 5, 19, 14, 30),
ResourceId: 2,
Color: '#4169e1'
},
];
return datas;
}
}
});
</script>
<style scoped>
@import '../../../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../../../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../../../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../../../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../../../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../../../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../../../node_modules/@syncfusion/ej2-vue-schedule/styles/material.css';
.schedule-container >>> .e-schedule .e-timeline-month-view .e-resource-left-td {
width: 150px;
}
.schedule-container >>> .e-schedule .e-appointment-details {
padding: 0 !important;
}
</style>
