vue项目中FullCalendar插件日历内容换行显示

在 Vue 项目中使用 FullCalendar 插件时，如果需要让日历内容换行显示，你可以通过设置 ` AgendaView` 的 `eventTimeFormat` 和 `allDaySlotLabel` 选项来实现。默认情况下，FullCalendar 可能会将事件标题自动截断并垂直堆叠显示，如果你想允许换行，可以这样做：

1. 引入 FullCalendar 插件及其 CSS 文件：

<script src="path/to/fullcalendar.js"></script>
<link href="path/to/fullcalendar.css" rel="stylesheet">

2. 在 Vue 组件中初始化 FullCalendar，并配置 `eventTimeFormat` 和 `allDaySlotLabel` ：

<template>
  <div id="calendar"></div>
</template>

<script>
import { FullCalendar } from 'fullcalendar'

export default {
  data() {
    return {
      calendarOptions: {
        plugins: ['dayGrid', 'timeGrid'],
        initialView: 'dayGridWeek',
        eventTimeFormat: { hour: 'numeric', minute: '2-digit', separator: ' ', allDaySlotLabel: '全天' }, // 添加换行标签
        eventContentHeight: 'auto', // 允许内容高度自适应
      }
    }
  },
  mounted() {
    this.createCalendar()
  },
  methods: {
    createCalendar() {
      const calendarEl = document.getElementById('calendar')
      const calendar = new FullCalendar(calendarEl, this.calendarOptions)
    }
  }
}
</script>

这样，日历中的事件标题会在适当的地方换行展示。如果你有特定的事件内容样式需求，也可以通过修改 `eventRender` 或者自定义模板来自定义显示。