FullCalendar vue

夏木。。。

已于 2022-04-11 17:26:28 修改

阅读量1.7k

点赞数

分类专栏： vue-js FullCalendar 文章标签： vue.js

于 2022-03-25 16:18:27 首次发布

本文链接：https://blog.csdn.net/w_jiunian/article/details/123738769

版权

本文介绍了如何利用FullCalendar库在Vue.js项目中创建一个日历组件，包括设置中文显示、头部工具栏配置、日期选择功能以及防止选区重叠的设定。通过参考FullCalendar的官方示例，可以实现日历的拖拽和点击选择日期等交互操作。

摘要由CSDN通过智能技术生成

实现日历拖拽点击选择日期

<template>
  <div class="app">
    <div id='calendar' ref="calendar"></div>
    <FullCalendar
        class='demo-app-calendar'
        :options='calendarOptions'
    >
      <template v-slot:eventContent='arg'>
        <b>{
  { arg.timeText }}</b>
        <i>{
  { arg.event.title }}</i>
      </template>
    </FullCalendar>
  </div>
</template>
<script>
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";

export default {
  name: 'file',
  components: {
    FullCalendar,
  },
  data(){
    return{
      calendarOptions: {
        plugins: [
          dayGridPlugin,