Fullcalendar(v4)是一个非常流行的用于日历日程处理的js组件。功能强大，文档齐全，定制化程度高，可与您的项目无缝对接。今天我们就来看看如何在Vue框架下使用Fullcalendar。查看演示安装Fullcalendar第一步当然是安装FullCalendar相关的依赖。我们需要安装Vue适配器、核心包和任何你想添加功能的插件。npminstall--save@fullcalendar/vue@fullcalendar/core@fullcalendar/daygrid@fullcalendar/interactionFullCalendarv4以核心代码和插件的形式提供给用户安装，我们可以直接安装对应的插件我们需要的任何功能。使用时可参考：功能插件列表。如何使用首先我们创建一个Main.vue文件，在模板中写入："header"@dateClick="handleDateClick":plugins="calendarPlugins":events="calendarEvents"@eventClick="handleEventClick"/>我们在中定义了组件，包括属性和方法。defaultView：表示默认使用当前月视图，即看到的是当月的视图。还有日视图和周视图等。locale：Localization，我们使用简体中文。firstDay：一周的第一天，我们中国人的习惯是周一是一周的第一天。weekNumberCalculation：配合firstDay，设置为ISO，一周的第一天是星期一。header：日历的表头设置，包括标题、左右键设置等。events：日程事件内容。更多属性方法可以查看文档：官方文档。v3版中文文档请移步：https://www.helloweba.net/javascript/445.html。然后在javascript部分，先导入组件和样式。从“@fullcalendar/vue”导入FullCalendar从“@fullcalendar/daygrid”导入dayGridPlugin从“@fullcalendar/interaction”导入interactionPlugin导入“@fullcalendar/core/main.css”；然后，定义数据，包括接口和事件内容等，以及方法调用。注意需要使用Fullcalendar函数插件，必须定义在calendarPlugins中。exportdefault{components:{FullCalendar},data(){return{calendarPlugins:[dayGridPlugin,interactionPlugin],header:{左：'prev,nexttoday',center:'title',right:'dayGridMonth,timeGridWeek,timeGridDay'},evnetTime:{hour:'numeric',minute:'2-digit',hour12:false},calendarEvents:[{title:'部门会议',start:newDate()}]}},methods:{handleDateClick(arg){if(confirm('Doyouwanttoaddaneweventat'+arg.dateStr+'?')){this.calendarEvents.push({//添加新事件数据title:'Newevent',开始：arg.date，allDay：arg.allDay}）}}，handleEventClick（信息）{alert('事件：'+info.event.title);info.el.style.borderColor='红色';}}}保存，执行npmrundev，就可以看到Fullcalendar渲染出来的日程页面了。Fullcalendar官网还提供了它在React和Angular框架中的使用。这是一个vuefullcalendar的简单例子。Fullcalendar的应用请关注文章：使用Fullcalendar管理日历事件（增删改查拖拽）使用Fullcalendar管理时间计划与排班
