如何校验用户权限动态设置FullCalendar的editable属性及获取渲染前初始化方法

首先明确你的核心疑问：FullCalendar没有内置专门的渲染前初始化钩子，但它的渲染逻辑完全由开发者手动调用render()方法触发，你完全可以在调用render()前完成所有异步权限校验，再初始化渲染日历，就是最适配你需求的实现方式。

这里提供两种常用的实现方案：

方案1：先请求权限接口，再初始化日历（推荐） #

该方案不会出现日历先渲染再修改权限的界面闪现问题，逻辑更直观：

// 第一步调用PHP权限校验接口
fetch('/check_calendar_permission.php', {
  method: 'POST',
  credentials: 'same-origin' // 携带当前用户登录态Cookie
})
.then(res => res.json())
.then(authRes => {
  // 拿到权限结果后再初始化FullCalendar
  const calendarDom = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarDom, {
    initialView: 'dayGridMonth',
    // 直接根据接口返回设置可编辑属性
    editable: authRes.canEdit === true,
    // 你的其他日历配置项
    events: '/get_calendar_events.php'
  });
  // 所有前置逻辑处理完再触发渲染
  calendar.render();
})

方案2：先初始化日历，动态修改editable配置 #

如果你的业务逻辑需要先初始化日历，可以通过FullCalendar提供的setOption方法动态修改编辑权限：

const calendarDom = document.getElementById('calendar');
// 初始化时默认关闭编辑权限
const calendar = new FullCalendar.Calendar(calendarDom, {
  initialView: 'dayGridMonth',
  editable: false,
  events: '/get_calendar_events.php',
  // 可利用loading钩子在日历资源加载时同步校验权限
  loading: function(isLoading) {
    if (isLoading) {
      fetch('/check_calendar_permission.php', {
        method: 'POST',
        credentials: 'same-origin'
      })
      .then(res => res.json())
      .then(authRes => {
        // 动态修改编辑权限配置
        calendar.setOption('editable', authRes.canEdit === true);
      })
    }
  }
});
calendar.render();

安全提示：前端的editable配置仅为界面层限制，后端所有日历修改、删除、新增的相关接口必须额外增加权限校验逻辑，避免用户手动篡改前端代码绕过限制。

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