在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 + ' "htmlcode">

<FullCalendar @eventClick="handleEventClick" />




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


完整例子在我的github项目里，项目地址：https://github.com/Inspiration1/asteroid
官方文档：
https://fullcalendar.io/docs/vue
https://fullcalendar.io/docs#toc
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。