php日程 增删改查,使用Fullcalendar管理日程事件(增删改查拖放)

新版Fullcalendar(v4)拥有丰富的选项方法事件配置以及插件应用，对开发者非常友好，开发者可以轻松的利用Fullcalendar定制一个完美的日程安排应用，本文将讲解最实际的日程事件管理前后端交互实例，包括事件的增删改查以及拖放应用的实现。

准备

本实例将要实现的功能：打开日程安排月视图，默认加载当前月视图的所有事件；点击视图中的任意日期，会弹出新增事件表单，输入事件相关信息后，保存即可；点击视图中的事件，会弹出修改事件表单，可对事件进行修改，也删除事件；我们也可以对视图中的事件进行拖放，拖放完毕也就改变了事件的时间。

注意本文提到的“事件”是指Fullcalendar日程安排事件内容。

本文涉及到的web技术有：

Vue + FullCalendar + Axios + Element-ui + PHP。

本文篇幅较长，建议最好边阅读边实际操作。

我们使用Axios作为Ajax请求模块，具体使用教程可以参考：《Vue项目中使用Axios封装http请求》，我们还用了Element-ui的Dialog、表单、日期时间拾取器等组件。

我们在上一节文章《在Vue框架下使用Fullcalendar》的基础上，新建Event.vue文件：

locale="zh-cn"

timeZone="UTC"

firstDay="1"

weekNumberCalculation="ISO"

editable="true"

droppable="true"

displayEventEnd="true"

:eventTimeFormat="evnetTime"

:header="header"

:plugins="calendarPlugins"

:events="calendarEvents"

@dateClick="handleDateClick"

@eventClick="handleEventClick"

@eventDrop="calendarEventDrop"

@datesRender="handleDatesRender"

/>

import FullCalendar from '@fullcalendar/vue'

import dayGridPlugin from '@fullcalendar/daygrid'

import timeGridPlugin from '@fullcalendar/timegrid'

import interactionPlugin, { Draggable } from '@fullcalendar/interaction';

import '@fullcalendar/core/main.css';

import '@fullcalendar/daygrid/main.css';

import '@fullcalendar/timegrid/main.css';

export default {

components: {

FullCalendar

},

data() {

return {

calendarPlugins: [

dayGridPlugin,

timeGridPlugin,

interactionPlugin

],

header: {

left: 'prev,next today',

center: 'title',

right: 'dayGridMonth,timeGridWeek,timeGridDay'

},

evnetTime: {

hour: 'numeric',

minute: '2-digit',

hour12: false

},

calendarEvents: [],

calendarEventDrop: info => {

this.dropEvent(info);

},

handleDatesRender: arg => {

this.getEventsList(arg.view)

},

dialogFormVisible: false,

form: {