fullcalendar vue3 限制月日历每日的title长度

在Vue3中使用FullCalendar插件时，如果你想要限制每个日历条目（标题）的最大字符数，你可以通过配置`eventRender`选项或者直接修改`EventDef`对象来实现。以下是步骤：

1. 首先，在 FullCalendar 的配置项中设置 `eventRender` 回调函数：

<template>
  <div ref="calendarEl" />
</template>

<script>
import { FullCalendar } from '@fullcalendar/vue'

export default {
  components: {
    FullCalendar,
  },
  data() {
    return {
      calendarConfig: {
        plugins: ['interaction', 'dayGrid', 'timeGrid'],
        events: [], // 初始化事件数据
        eventRender(event, element) {
          const title = event.title;
          if (title.length > yourDesiredLength) {
            element.querySelector('.fc-title').innerText = `${title.slice(0, yourDesiredLength)}...`;
          }
        },
      },
    };
  },
  mounted() {
    this.$refs.calendarEl.fullCalendar(this.calendarConfig);
  },
}
</script>

这里，`yourDesiredLength` 是你希望的最长标题字符数。

2. 如果你想在创建事件时就限制长度，可以在数据里处理事件对象：

data() {
  return {
    calendarEvents: [
      {
        id: 1,
        title: this.limitTitleLength('Event Title That Might Be Too Long'), // 在创建时限制长度
        ...
      },
      ...
    ],
    limitTitleLength(title) {
      return title.length > yourDesiredLength ? `${title.slice(0, yourDesiredLength)}...` : title;
    },
  };
},