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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to stop overlapping of events in vue library

Thread ID:

Created:

Updated:

Platform:

Replies:

149812 Dec 10,2019 01:44 PM UTC Dec 11,2019 09:56 AM UTC Vue 1
loading
Tags: Schedule
Naoto Fujii
Asked On December 10, 2019 01:44 PM UTC

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>



Vinitha Devi Murugan [Syncfusion]
Replied On 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  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon