在Vue项目中用fullcalendar制作日程表的示例代码

<script>import FullCalendar from '@fullcalendar/vue'import dayGridPlugin from '@fullcalendar/daygrid'export default { components: {  FullCalendar }, data() {  return {   calendarPlugins: [ dayGridPlugin ]  } }}</script>

<template> <FullCalendar defaultView="dayGridMonth" :plugins="calendarPlugins" /></template>

<style lang='less'>  //用什么插件必须引入相应的样式表，否则不能正常显示  @import '~@fullcalendar/core/main.css';  @import '~@fullcalendar/daygrid/main.css';</style>

  <FullCalendar locale="zh-cn" />

  <FullCalendar   :header="{    left: 'prev,next today',    center: 'title',    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'   }"   :buttonText="buttonText"    />

 data () {  return {   buttonText: {    today: '今天',    month: '月',    week: '周',    day: '天'   }  } }

  <FullCalendar @dateClick="handleDateClick" />

  handleDateClick (arg) {   if (confirm('Would you like to add an event to ' + arg.dateStr + ' ?')) {    this.calendarEvents.push({ // add new event data     title: 'New Event',     start: arg.date,     allDay: arg.allDay    })   }  }

<FullCalendar @eventClick="handleEventClick" />

  handleEventClick (info) {   alert('Event: ' + info.event.title)  }