Fullcalendar Vue 组件：获取默认 EventContent 和自定义事件内容

## 从 Fullcalendar Vue 组件获取默认 EventContent

### 引言

Fullcalendar Vue 组件是一个强大且易于使用的库，用于在 Vue.js 应用程序中创建和管理日历。有时，我们可能需要获取事件的默认内容，即由 Fullcalendar 格式化的内容。这在某些情况下很有用，例如，当我们需要在事件上添加额外的元素或对其进行自定义时。

### 获取默认 EventContent

Fullcalendar Vue 组件没有直接提供获取默认 eventContent 的方法。但是，我们可以通过以下步骤来实现：

1. 内容注入

在 eventContent 插槽中，我们可以使用 event 对象访问事件数据，然后使用 fullCalendar.formatDate 方法格式化事件的日期和标题。

2. 存储默认 EventContent

在格式化事件内容后，我们可以将结果存储在一个变量中，例如 defaultFormattedEventContent。

3. 在其他地方使用默认 EventContent

现在，我们可以在其他地方使用 defaultFormattedEventContent 变量来获取默认格式化的事件内容。

### 示例

以下是一个完整示例，演示如何获取默认 eventContent 并将其用于自定义事件内容：

<template>
  <FullCalendar ref="fullCalendar" :options="calendarOptions">
    <template #eventContent="{ event }">
      <div class="tooltip" :data-tip="formatTooltip(event)">
        <div class="text-sm font-medium">{{ defaultFormattedEventContent }}</div>
      </div>
    </template>
  </FullCalendar>
</template>

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

export default {
  components: { FullCalendar },
  setup() {
    const fullCalendar = ref(null);
    const defaultFormattedEventContent = ref('');

    const calendarOptions = {
      eventContent(event) {
        defaultFormattedEventContent.value = `${fullCalendar.value.formatDate(event.start)} - ${fullCalendar.value.formatDate(event.end)}
${event.title}`;
      },
    };

    return {
      fullCalendar,
      calendarOptions,
    };
  },
};
</script>

### 获取当前活动视图

要获取当前活动视图，可以使用 getCurrentView 方法，如下所示：

const currentView = fullCalendar.value.getCurrentView();

其中 fullCalendar 是 ref 到 Fullcalendar 组件的实例。

### 结论

本文提供了从 Fullcalendar Vue 组件中获取默认 eventContent 的步骤。通过使用内容注入、存储默认事件内容和在其他地方使用默认事件内容，我们可以轻松地实现这一点。我们还可以使用 getCurrentView 方法获取当前活动视图。这些技术使我们能够自定义事件内容并增强 Fullcalendar Vue 应用程序的功能。

### 常见问题解答

1. 为什么需要获取默认 eventContent？

获取默认 eventContent 允许我们自定义事件内容并添加额外的元素，例如工具提示或按钮。

2. 我可以使用 eventContent 插槽访问 eventContent 吗？

是的，eventContent 插槽提供对事件数据的访问，包括日期、标题和其他属性。

3. 如何存储默认 eventContent？

可以使用 ref 来存储默认 eventContent，如下所示：

const defaultFormattedEventContent = ref('');

4. 在哪里可以使用默认 eventContent？

默认 eventContent 可以用于自定义事件内容，例如添加额外的元素或格式化显示。

5. 如何获取当前活动视图？

可以使用 getCurrentView 方法获取当前活动视图，如下所示：

const currentView = fullCalendar.value.getCurrentView();