如何获取FullCalendar Vue组件的默认eventContent或当前视图？

一、获取FullCalendar默认格式化的eventContent #

你可以直接通过eventContent回调里的info.renderDefault()方法拿到FullCalendar默认渲染的事件DOM元素，再把它包裹到DaisyUI的提示框容器中。这样既保留了FullCalendar针对不同视图自动适配的原生格式，又能加上提示框效果，不用自己写多套自定义内容适配视图。

示例代码：

<FullCalendar
  :eventContent="wrapEventWithTooltip"
  // 你的其他配置项（比如events、plugins等）
/>

<script setup>
const wrapEventWithTooltip = (info) => {
  // 调用默认渲染函数，获取适配当前视图的事件内容DOM
  const defaultEventEl = info.renderDefault();
  
  // 创建DaisyUI提示框容器
  const tooltipContainer = document.createElement('div');
  tooltipContainer.className = 'tooltip tooltip-accent'; // 按需选择DaisyUI的tooltip样式类
  // 设置提示内容，可替换为event.extendedProps中的自定义字段
  tooltipContainer.setAttribute('data-tip', info.event.title);
  
  // 将默认事件内容放入提示框容器
  tooltipContainer.appendChild(defaultEventEl);
  
  // 返回包裹后的DOM节点数组
  return {
    domNodes: [tooltipContainer]
  };
};
</script>

二、获取当前活跃视图（替代方案） #

如果还是想针对不同视图写自定义内容，不用额外维护状态，直接在eventContent的info参数里就能拿到当前视图类型：info.view.type，取值对应你配置的视图（比如dayGridMonth、timeGridWeek、timeGridDay）。

示例代码：

<FullCalendar
  :eventContent="renderEventByView"
  // 其他配置
/>

<script setup>
const renderEventByView = (info) => {
  let eventEl;
  
  // 根据当前视图类型分别处理
  if (info.view.type === 'dayGridMonth') {
    // 月视图自定义内容，适配月视图的显示空间
    eventEl = document.createElement('div');
    eventEl.innerHTML = `<span class="text-sm truncate">${info.event.title}</span>`;
  } else {
    // 其他视图使用默认渲染内容
    eventEl = info.renderDefault();
  }
  
  // 包裹DaisyUI提示框
  const tooltipWrapper = document.createElement('div');
  tooltipWrapper.className = 'tooltip tooltip-open';
  tooltipWrapper.setAttribute('data-tip', info.event.extendedProps.tooltip || info.event.title);
  tooltipWrapper.appendChild(eventEl);
  
  return { domNodes: [tooltipWrapper] };
};
</script>

如果需要在组件其他逻辑中获取当前视图，可通过FullCalendar的ref实例实现：

<FullCalendar
  ref="calendarRef"
  // 其他配置
/>

<script setup>
import { ref, onMounted } from 'vue';

const calendarRef = ref(null);
let currentViewType = '';

onMounted(() => {
  // 初始获取视图类型
  currentViewType = calendarRef.value.getApi().getCurrentView().type;
  
  // 监听视图切换事件，更新视图类型
  calendarRef.value.getApi().on('viewDidMount', (viewInfo) => {
    currentViewType = viewInfo.view.type;
  });
});
</script>

内容的提问来源于stack exchange，提问作者Bill200