Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
149812 | Dec 10,2019 01:44 PM UTC | Dec 11,2019 09:56 AM UTC | Vue | 1 |
![]() |
Tags: Schedule |
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>
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.
This page will automatically be redirected to the sign-in page in 10 seconds.