php 包含表达式会阻止 FullCalendar 呈现

Question

我正在处理 2 个 php 文件，它们是 tabs.php 和 timetable.php。 tabs.php 充当导航栏并将用户引导至许多页面，包括 timetable.php。而 timetable.php 有一个完美运行的 FullCalendar。我将用户从 tabs.php 引导到 timetable.php 的方式如下：

<li><button class="tablink" onclick="openPage('Timetable', this)"id="defaultOpen4">Timetable</button></li>
<div id="Timetable" class="tabcontent">
  <?php include("timetable.php"); ?>
</div>

FullCalendar的脚本如下：

<script>
    $(document).ready(function() {
      $('#calendar').fullCalendar({
        editable: false, //Prevents user from moving around events
        header: {
          left: 'prev, next today',
          center: 'title',
          right: 'month, agendaWeek, agendaDay'
        },
        events: function(start, end, timezone, callback) {
          $.ajax({
            url: 'loadEventsStudent.php',
            dataType: 'json',
            data: {},
            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'],
                });
              }
              //adding the callback
              callback(events);
            }
          });
        }
      });
    });
  </script>

问题是当我进入时间表页面时，只有日历按钮可见。单击这些按钮中的任何一个后，日历就会呈现出来。当我在另一个文件上尝试运行时，FullCalendar 的脚本工作得很好，这让我认为包含表达式导致了这个问题。当我尝试检查浏览器的网络选项卡时，我注意到一旦我打开时间表页面，什么也没有发生，但是一旦我点击任何日历按钮，loadEventsStudent.php 文件（存储来自数据库的数据) 出现，然后呈现日历。有没有一种方法可以在不更改两个文件的连接方式的情况下呈现日历？

Answer 1

这是因为 include() 是一个 PHP 函数，并且您日历的 HTML 代码已经加载到浏览器中。

我建议的快速解决方法是在您查看页面时触发对日历按钮的点击，这样它就可以在您访问日历选项卡时加载日历事件。

$( document ).ready(function() {

   // Your code for the calendar comes here

   $("#defaultOpen4").on("click", function() {
     $( ".class-of-the-calendar-button" ).trigger( "click" );
   });
});

php 包含表达式会阻止 FullCalendar 呈现

php include expression prevents FullCalendar from rendering

html

javascript

php

fullcalendar

fullcalendar-3