FullCalendar通过Ajax动态设置businessHours配置不生效问题

• 核心问题是$.ajax默认是异步请求：FullCalendar初始化执行到businessHours: getBusinessHours()这行时，AJAX请求还在发送过程中，根本没拿到后端返回的营业时间数据，getBusinessHours()本身没有写返回值，默认返回undefined，FullCalendar读不到有效配置自然不会生效。
• 函数逻辑缺失：你写的getBusinessHours()仅在AJAX请求成功的回调里打印了接口返回内容，没有把数据传递给FullCalendar配置项的逻辑。
• 缺少JSON解析配置：AJAX请求未显式指定dataType: 'json'，部分场景下接口返回的是序列化后的JSON字符串，不是FullCalendar可识别的JS数组结构，直接传入字符串也会导致配置失效。

方案1：先拉取数据再初始化日历（推荐） #

这种写法不存在时序问题，逻辑最直观，适合营业时间不需要在页面运行时动态修改的场景：

// 先请求后端拉取营业时间配置
$.ajax({
  url: "../json_business_hours/json_business_hours.php",
  type: "POST",
  dataType: "json", // 自动把接口返回的JSON字符串解析为JS对象/数组
  success: function(businessHoursData) {
    // 拿到有效数据后再执行FullCalendar初始化
    const calendarEl = document.getElementById('calendar');
    const calendar = new FullCalendar.Calendar(calendarEl, {
      // 其余你的原有初始化配置，比如plugins、initialView等保持不变
      businessHours: businessHoursData,
    });
    calendar.render();
  }
});

方案2：初始化后动态更新配置 #

适合页面加载完成后，需要随时切换营业时间规则的场景：

// 先完成日历基础初始化
const calendarEl = document.getElementById('calendar');
const calendar = new FullCalendar.Calendar(calendarEl, {
  // 其余你的原有初始化配置保持不变
  businessHours: false, // 初始状态先不启用营业时间规则
});
calendar.render();

// 异步拉取营业时间配置
$.ajax({
  url: "../json_business_hours/json_business_hours.php",
  type: "POST",
  dataType: "json",
  success: function(businessHoursData) {
    // 动态更新businessHours配置，日历会自动重绘对应效果
    calendar.setOption('businessHours', businessHoursData);
  }
});

• 不要为了省事变通使用async: false把AJAX改成同步模式，这种写法会阻塞浏览器主线程，请求过程中页面会完全卡死，严重影响用户体验。
• 你当前接口返回的时间值带秒数后缀（比如09:00:00）不影响FullCalendar识别，不需要额外做字符串截断处理。

内容的提问来源于stack exchange，提问作者JB-chrysalisbsl