vue实现日程

Vue 实现日程功能的方法

使用 FullCalendar 插件

FullCalendar 是一个功能强大的日历插件，支持 Vue 集成。安装依赖：

npm install @fullcalendar/vue @fullcalendar/core @fullcalendar/daygrid @fullcalendar/interaction

在 Vue 组件中引入并配置：

<template>
  <FullCalendar :options="calendarOptions" />
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'

export default {
  components: { FullCalendar },
  data() {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin],
        initialView: 'dayGridMonth',
        events: [
          { title: '会议', start: '2023-10-01' },
          { title: '截止日期', start: '2023-10-15' }
        ],
        dateClick: this.handleDateClick
      }
    }
  },
  methods: {
    handleDateClick(arg) {
      alert('点击日期: ' + arg.dateStr)
    }
  }
}
</script>

自定义日程组件

通过原生 Vue 实现简单的日程视图：

<template>
  <div class="calendar">
    <div v-for="day in days" :key="day.date" class="day">
      <div class="date">{{ day.date }}</div>
      <div v-for="event in day.events" :key="event.id" class="event">
        {{ event.title }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      days: [
        { date: '2023-10-01', events: [{ id: 1, title: '团队会议' }] },
        { date: '2023-10-02', events: [] }
      ]
    }
  }
}
</script>

<style>
.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.day {
  border: 1px solid #eee;
  padding: 8px;
}
.event {
  background: #e3f2fd;
  margin: 4px 0;
  padding: 4px;
}
</style>

与后端数据交互

结合 API 获取日程数据：

methods: {
  async fetchEvents() {
    try {
      const response = await axios.get('/api/events')
      this.calendarOptions.events = response.data
    } catch (error) {
      console.error('获取日程失败:', error)
    }
  }
},
mounted() {
  this.fetchEvents()
}

添加日程功能

实现新增日程的交互：

<template>
  <button @click="showDialog = true">添加日程</button>
  <dialog v-if="showDialog">
    <input v-model="newEvent.title" placeholder="事件标题">
    <input type="date" v-model="newEvent.date">
    <button @click="addEvent">保存</button>
  </dialog>
</template>

<script>
export default {
  data() {
    return {
      showDialog: false,
      newEvent: { title: '', date: '' }
    }
  },
  methods: {
    addEvent() {
      this.events.push({ ...this.newEvent })
      this.showDialog = false
      this.newEvent = { title: '', date: '' }
    }
  }
}
</script>

实现拖拽功能

使用 Vue.Draggable 实现日程项拖拽排序：

npm install vuedraggable

<template>
  <draggable v-model="events" group="events">
    <div v-for="event in events" :key="event.id" class="event">
      {{ event.title }}
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: { draggable }
}
</script>