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. Image for the cookie policy date
close icon

How to stop overlapping of events in vue library

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>



1 Reply

VD Vinitha Devi Murugan Syncfusion Team December 11, 2019 09:56 AM UTC

Hi Naoto 
 
Syncfusion Greetings. 
 
We achieved your requirement by making use of rowAutoHeight property of our scheduler and same can be available in below link. 
 
 
Kindly refer below links to know more about rowAutoHeight property. 
API Link: https://ej2.syncfusion.com/vue/documentation/api/schedule/#rowautoheight                                                                                                                                            
 
Kindly try with the above sample and let us know, if you need any further assistance on this. 
 
Regards,  
M.Vinitha devi  


Loader.
Live Chat Icon For mobile
Up arrow icon