当前位置：首页 > VUE

vue实现日程

2026-02-10 01:00:31VUE

Vue 实现日程功能的方法

使用第三方日历组件

推荐使用成熟的 Vue 日历组件库，如 FullCalendar 或 V-Calendar。这些组件提供了丰富的日程管理功能，包括事件拖拽、日期选择等。

安装 FullCalendar：

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

基本使用示例：

<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-05-01' },
          { title: '出差', start: '2023-05-07', end: '2023-05-10' }
        ],
        dateClick: this.handleDateClick,
        eventClick: this.handleEventClick
      }
    }
  },
  methods: {
    handleDateClick(arg) {
      alert('点击日期: ' + arg.dateStr)
    },
    handleEventClick(arg) {
      alert('事件: ' + arg.event.title)
    }
  }
}
</script>

自定义实现简单日程

如需简单实现，可以创建一个基础的日程组件：

<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-05-01',
          events: [
            { id: 1, title: '团队会议', time: '10:00' },
            { id: 2, title: '客户拜访', time: '14:00' }
          ]
        }
      ]
    }
  }
}
</script>

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

集成后端数据

通常需要从API获取日程数据：

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

添加事件功能

实现添加新事件的表单：

<template>
  <div>
    <form @submit.prevent="addEvent">
      <input v-model="newEvent.title" placeholder="事件标题">
      <input type="date" v-model="newEvent.date">
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newEvent: {
        title: '',
        date: ''
      }
    }
  },
  methods: {
    async addEvent() {
      try {
        await axios.post('/api/events', this.newEvent)
        this.fetchEvents()
        this.newEvent = { title: '', date: '' }
      } catch (error) {
        console.error('添加事件失败:', error)
      }
    }
  }
}
</script>

实现拖拽功能

使用 Vue.Draggable 实现事件拖拽排序：

npm install vuedraggable

使用示例：

<template>
  <draggable v-model="events" group="events" @end="onDragEnd">
    <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 },
  methods: {
    onDragEnd() {
      // 更新事件顺序到后端
      this.saveEventOrder()
    }
  }
}
</script>

vue实现日程