用vue2实现类似飞书日历的拖拽选择区域创建日程的功能

实现类似飞书日历的拖拽选择区域创建日程的功能，可以采用以下步骤：

1. 在 Vue 组件中引入 `vuedraggable` 和 `moment` 库，并注册 `vuedraggable` 组件。

<template>
  <div>
    <div ref="calendar" @mousedown="startDrag" @mousemove="dragging" @mouseup="endDrag" style="position: relative;">
      <div v-for="day in days" :key="day" :style="{ width: columnWidth + 'px', display: 'inline-block' }">
        {{ day }}
      </div>
      <div v-for="event in events" :key="event.id" :style="{ top: event.top + 'px', left: event.left + 'px', width: event.width + 'px', height: event.height + 'px', position: 'absolute', backgroundColor: event.color }">
        {{ event.title }}
      </div>
      <div v-show="isDragging" :style="{ top: dragTop + 'px', left: dragLeft + 'px', width: dragWidth + 'px', height: dragHeight + 'px', position: 'absolute', backgroundColor: dragColor, opacity: 0.5 }"></div>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import VueDraggable from 'vuedraggable';

export default {
  components: {
    VueDraggable,
  },
  data() {
    return {
      days: [], // 日历的日期列表
      events: [], // 日程列表
      columnWidth: 100, // 每个日期列的宽度
      isDragging: false, // 是否正在拖拽选择区域
      dragStartX: 0, // 拖拽选择区域的起始 X 坐标
      dragStartY: 0, // 拖拽选择区域的起始 Y 坐标
      dragEndX: 0, // 拖拽选择区域的结束 X 坐标
      dragEndY: 0, // 拖拽选择区域的结束 Y 坐标
      dragTop: 0, // 拖拽选择区域的顶部位置
      dragLeft: 0, // 拖拽选择区域的左侧位置
      dragWidth: 0, // 拖拽选择区域的宽度
      dragHeight: 0, // 拖拽选择区域的高度
      dragColor: '#4285F4', // 拖拽选择区域的颜色
    };
  },
  computed: {
    calendarWidth() {
      return this.days.length * this.columnWidth;
    },
  },
  mounted() {
    // 初始化日历日期列表
    const startDate = moment().startOf('week');
    this.days = Array.from({ length: 7 }, (_, i) => startDate.clone().add(i, 'days').format('YYYY-MM-DD'));

    // 初始化日程列表
    this.events = [
      { id: 1, title: '日程1', start: moment().add(1, 'hours').toDate(), end: moment().add(2, 'hours').toDate(), color: '#DB4437' },
      { id: 2, title: '日程2', start: moment().add(1, 'days').add(2, 'hours').toDate(), end: moment().add(1, 'days').add(3, 'hours').toDate(), color: '#F4B400' },
      { id: 3, title: '日程3', start: moment().add(2, 'days').add(1, 'hours').toDate(), end: moment().add(2, 'days').add(2, 'hours').toDate(), color: '#0F9D58' },
    ];
    this.updateEventsLayout();
  },
  methods: {
    startDrag(event) {
      if (event.target === this.$refs.calendar) {
        this.isDragging = true;
        this.dragStartX = event.clientX;
        this.dragStartY = event.clientY;
        this.dragEndX = event.clientX;
        this.dragEndY = event.clientY;
        this.dragTop = Math.min(this.dragStartY, this.dragEndY);
        this.dragLeft = Math.min(this.dragStartX, this.dragEndX);
        this.dragWidth = Math.abs(this.dragEndX - this.dragStartX);
        this.dragHeight = Math.abs(this.dragEndY - this.dragStartY);
      }
    },
    dragging(event) {
      if (this.isDragging) {
        this.dragEndX = event.clientX;
        this.dragEndY = event.clientY;
        this.dragTop = Math.min(this.dragStartY, this.dragEndY);
        this.dragLeft = Math.min(this.dragStartX, this.dragEndX);
        this.dragWidth = Math.abs(this.dragEndX - this.dragStartX);
        this.dragHeight = Math.abs(this.dragEndY - this.dragStartY);
      }
    },
    endDrag() {
      if (this.isDragging) {
        this.isDragging = false;
        const start = moment(this.$refs.calendar).add(this.dragLeft, 'px').add(this.dragTop, 'px').toDate();
        const end = moment(this.$refs.calendar).add(this.dragLeft + this.dragWidth, 'px').add(this.dragTop + this.dragHeight, 'px').toDate();
        const event = { id: this.events.length + 1, title: '新日程', start, end, color: '#4285F4' };
        this.events.push(event);
        this.updateEventsLayout();
      }
    },
    updateEventsLayout() {
      for (const event of this.events) {
        const startMoment = moment(event.start);
        const endMoment = moment(event.end);
        const startDate = startMoment.format('YYYY-MM-DD');
        const startHour = startMoment.hour();
        const startMinute = startMoment.minute();
        const endDate = endMoment.format('YYYY-MM-DD');
        const endHour = endMoment.hour();
        const endMinute = endMoment.minute();
        const startColumnIndex = this.days.indexOf(startDate);
        const endColumnIndex = this.days.indexOf(endDate);
        event.top = startHour * 60 + startMinute;
        event.left = startColumnIndex * this.columnWidth;
        if (startColumnIndex === endColumnIndex) {
          event.width = this.columnWidth;
        } else {
          event.width = (endColumnIndex - startColumnIndex + 1) * this.columnWidth;
        }
        event.height = (endHour - startHour) * 60 + (endMinute - startMinute);
      }
    },
  },
};
</script>

在上面的代码中，我们使用 `ref` 属性引用了日历容器元素，并监听 `mousedown`、`mousemove` 和 `mouseup` 事件，实现了拖拽选择区域的功能。在 `startDrag` 方法中初始化了选择区域的起始坐标，在 `dragging` 方法中更新了选择区域的结束坐标和位置、大小等信息，在 `endDrag` 方法中根据选择区域的位置和大小创建了新的日程，并更新了日程列表和日程的布局。

为了方便计算日程的布局，我们使用了 `moment` 库来处理日期和时间，使用了 `lodash` 库的 `indexOf` 方法来查找日期在日期列表中的索引。在计算日程布局时，我们先获取开始时间和结束时间的小时和分钟，然后根据日期和时间计算出日程的位置、大小等信息，并将这些信息保存到日程对象中。最后，在模板中使用 `v-for` 指令将日历中的日期和日程渲染出来。

需要注意的是，上面的代码只实现了基本的拖拽选择区域创建日程的功能，还需要根据实际需求对代码进行调整和优化。