Vue中FullCalendar自定义按钮禁用：disabled属性遇渲染重置问题

问题分析 #

你遇到的核心问题是：FullCalendar在视图切换、日期点击等操作时会重新渲染自定义按钮，直接通过DOM操作设置的disabled属性会被FullCalendar根据初始按钮配置覆盖，而CSS类不会被框架主动移除，所以能保持状态。要使用disabled属性统一应用行为，得让FullCalendar自己管理这个属性，或者在每次重渲染后重新设置。

解决方案1：通过响应式配置驱动按钮状态（推荐） #

FullCalendar支持通过动态配置来控制按钮的disabled状态，把按钮配置做成响应式数据，当依赖的buss.value.startDay变化时，自动更新配置，让FullCalendar在重渲染时读取最新状态，自动设置disabled属性。

示例代码：

<script setup>
import { ref, watch } from 'vue';
import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';

const buss = ref({ startDay: undefined });

// 定义响应式的自定义按钮配置
const customCalendarButtons = ref({
  myCustomButton: {
    text: '自定义按钮',
    click: () => {
      // 你的按钮点击逻辑
    },
    disabled: true // 初始禁用状态
  }
});

// 监听startDay的变化，同步更新按钮disabled状态
watch(() => buss.value?.startDay, (newStartDay) => {
  customCalendarButtons.value.myCustomButton.disabled = newStartDay === undefined;
}, { immediate: true }); // 立即执行一次，初始化状态
</script>

<template>
  <FullCalendar
    :plugins="[dayGridPlugin]"
    :headerToolbar="{
      left: 'prev,next today',
      center: 'title',
      right: 'myCustomButton'
    }"
    :customButtons="customCalendarButtons"
  />
</template>

解决方案2：在FullCalendar重渲染钩子中重新设置disabled属性 #

如果因为场景限制必须手动操作DOM，需要在FullCalendar每次完成重渲染的钩子中调用你的更新函数，确保按钮状态在每次渲染后都被正确设置。

示例代码：

<script setup>
import { ref, nextTick } from 'vue';
import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';

const buss = ref({ startDay: undefined });

const updateMyCustomButton = async () => {
  await nextTick();
  const btn = document.querySelector(".fc-my-custom-button") as HTMLButtonElement | null;
  if (btn) {
    btn.disabled = buss.value?.startDay === undefined;
  }
};

const calendarOptions = ref({
  plugins: [dayGridPlugin],
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'myCustomButton'
  },
  customButtons: {
    myCustomButton: {
      text: '自定义按钮',
      click: () => {
        // 你的按钮点击逻辑
      }
    }
  },
  // 每次日期渲染完成后更新按钮状态
  datesRender: () => updateMyCustomButton(),
  // 视图更新后也同步状态
  viewDidUpdate: () => updateMyCustomButton(),
  // 组件挂载完成后初始化状态
  viewDidMount: () => updateMyCustomButton()
});
</script>

<template>
  <FullCalendar v-bind="calendarOptions" />
</template>

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