How to stop overlapping of events in vue library

1 Reply
2 Participants

Created by
NF Naoto Fujii

Platform
Vue

Platform
Vue

Control
Schedule

Created On
Dec 10, 2019 01:44 PM UTC

Last Activity On
Dec 11, 2019 09:56 AM UTC

Want to subscribe?
SIGN IN

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>