PHP include表达式导致FullCalendar无法自动渲染问题咨询

问题根因 #

你的tab切换逻辑中，Timetable对应的.tabcontent容器默认处于隐藏状态（通常设置为display: none），FullCalendar在隐藏DOM元素中初始化时，会跳过尺寸计算、事件请求等渲染必要流程，只有元素变为可见状态后才会正常执行相关逻辑，这就是为什么单独打开timetable.php正常、嵌套在tab里就需要点击按钮才渲染的核心原因。

可行解决方案（无需修改现有include关联逻辑） #

方案1：修改tab切换函数，切换到时间表标签时触发日历渲染 #

找到你现有的openPage函数，在原有tab切换显示的逻辑末尾新增判断即可：

function openPage(pageName, elmnt) {
  // ----- 原有tab切换逻辑全部保留不要修改 -----
  // 比如原来的隐藏所有tabcontent、移除选中样式、显示当前tab、添加选中样式等代码

  // 新增以下判断逻辑
  if (pageName === 'Timetable') {
    // 判断日历是否已经完成初始化
    if ($('#calendar').hasClass('fc')) {
      // 手动触发日历重渲染+事件拉取
      $('#calendar').fullCalendar('render');
      $('#calendar').fullCalendar('refetchEvents');
    }
  }
}

这个方案改动最小，不需要调整你原有的日历初始化代码和PHP文件关联逻辑。

方案2：封装日历初始化逻辑，仅在首次打开时间表标签时执行 #

如果担心重复渲染的问题，可以把原来的日历初始化代码封装成独立函数，首次切换到时间表标签时才执行初始化：

1. 先修改timetable.php里的初始化脚本：

// 把原来的$(document).ready里的逻辑封装成全局函数，不要自动执行
function initTimetableCalendar() {
  $('#calendar').fullCalendar({
    editable: false,
    header: {
      left: 'prev, next today',
      center: 'title',
      right: 'month, agendaWeek, agendaDay'
    },
    events: function(start, end, timezone, callback) {
      $.ajax({
        url: 'loadEventsStudent.php',
        dataType: 'json',
        success: function(data) {
          var events = [];
          for (var i = 0; i < data.length; i++) {
            events.push({
              title: data[i]['class'],
              start: data[i]['start_event'],
              end: data[i]['end_event'],
            });
          }
          callback(events);
        }
      });
    }
  });
}

2. 再修改openPage函数，首次切换到时间表标签时触发初始化：

// 加个全局变量标记是否已经初始化过日历
let calendarInited = false;
function openPage(pageName, elmnt) {
  // 原有tab逻辑保持不变

  if (pageName === 'Timetable' && !calendarInited) {
    initTimetableCalendar();
    calendarInited = true;
  }
}

两种方案都不需要调整你现有的PHP include关联逻辑，也不会影响timetable.php独立运行的功能。

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