当下个月按钮点击全日历不起作用时触发事件

Question

我有以下 fullcalendar，它正在加载当前月份的数据。这是正确加载所有 events.

$(document).ready(function() {
  var d = new Date();
  var defaultMonth = d.getMonth() + 1;
  var defaultYear = d.getFullYear();
  $.ajax({
    type: "POST",
    url: "calendarChangeAjax.php",
    data: {
      selectedMonth: defaultMonth,
      selectedYear: defaultYear
    },
    success: function(mainResult) {
      var mainResults = JSON.parse(mainResult);
      console.log(mainResults);
      populateCalendar(mainResults);
    }
  });
});

function populateCalendar(jArray) {
  var colors = "white";
  var dict = [];
  var details;
  for (i = 0; i < jArray["start"].length; i++) {
    var dates = jArray["start"][i];
    if (jArray["title"][i] != null) {
      details = jArray["title"][i];
      colors = "#E0F8E0";
      dict.push({
        "title": details,
        "start": dates,
        "color": colors
      });
    }
  }
  jArray.length = 0;
  //    var todayDate = new Date();
  $('#calendar').fullCalendar({
    //        defaultDate: todayDate,
    eventLimit: true, // allow "more" link when too many events
    events: dict
  });
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>

<div class="ui container">
  <div class="ui grid">
    <div class="ui sixteen column">
      <div id="calendar"></div>
    </div>
  </div>
</div>

以下是 Ajax 文件中的代码 calendarChangeAjax.php

$selectedMonth = $_POST['selectedMonth'];
$selectedYear = $_POST['selectedYear'];
$detailsArray = [];
$datesArray = [];
$query = "SELECT * FROM supervisorupdate WHERE MONTH(dateAdded) = '$selectedMonth' AND YEAR(dateAdded) = '$selectedYear' AND status =0";
$queryExecute = mysqli_query($conn, $query);
while ($queryExecuteResults = mysqli_fetch_array($queryExecute)) {
  $oa1 = $queryExecuteResults['oa1'];
  $oa2 = $queryExecuteResults['oa2'];
  $dateAdded = date("Y-m-d", strtotime($queryExecuteResults['dateAdded']));
  $singleDetail = $oa1.$oa2;
  array_push($detailsArray, $singleDetail);
  array_push($datesArray, $dateAdded);
}
$detailsDictionary = ["title" => $detailsArray];
$datesDictionary = ["start" => $datesArray];
$completedDictionary = array_merge($detailsDictionary, $datesDictionary);
echo json_encode($completedDictionary);

我希望 fullcalendar 在我单击基于那个月的下个月按钮时更改 events。所以我添加了以下代码

$('body').on('click', 'button.fc-next-button', function() {
  var selectedMonth = $('#calendar').fullCalendar('getView').intervalStart.format('MM');
  var selectedYear = $('#calendar').fullCalendar('getView').intervalStart.format('YYYY');
  $.ajax({
    type: "POST",
    url: "calendarChangeAjax.php",
    data: {
      selectedMonth: selectedMonth,
      selectedYear: selectedYear
    },
    success: function(nextResult) {
      var nextResults = JSON.parse(nextResult);
      console.log(nextResults);
      populateCalendar(nextResults);
    }
  });
});

我从 Ajax 呼叫中得到 nextResults 正确。

{title: Array(7), start: Array(7)}

但不知何故，当我单击下一步按钮时，事件没有显示。当 fullcalendar 第一次加载时，它总是只显示默认数据。有人可以帮我解决这个问题吗？

Answer 1

更新： 正如评论中所指出的（感谢@ADyson），您的 JS 正在引用 Fullcalendar v3。现在已经很老了，v5 是最新的。我的原始答案引用了 v5 文档，我也更新了 v3 links/options。

这是一个超级简单的例子。备注：

如果您不指定 initialDate (v5), (or defaultDate in v3)，它将默认为当前日期 - 因此无需设置当前日期。
如果您为 events: 配置 JSON 提要，Fullcalendar 将使用 GET 来请求它们。如果你想使用POST，你可以这样做，using the eventSources extended format (v5) (or v3). However, convention is那个POST是为了改变数据（例如购买，更新记录)，而 GET 用于读取数据。 AFAICT 你只是在加载事件数据，这实际上应该是一个 GET。我建议坚持惯例并更新您的后端以响应 GET 而不是 POST.
Fullcalendar 会在需要新数据时自动向您的活动提要发出新请求，例如，当您导航到新的月份时。无需添加任何代码来手动处理。

JS (v5):

document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        dayMaxEventRows: 3, // I think this is the v5 equivalent of eventLimit
        events: 'calendarChangeAjax.php',
    });
    calendar.render();
});

JS (v3):

// Fullcalendar v3 with jQuery
$(document).ready(function() {
    $('#calendar').fullCalendar({
        eventLimit: true, // allow "more" link when too many events
        events: 'calendarChangeAjax.php',
    });
});

我不确定您的 PHP 对 2 个合并的结果集做了什么。但是只要你从一个看起来像这样的数组生成一个 JSON 提要，Fullcalendar 就会处理它：

[
    {
      "title": "Event 1",
      "start": "2019-09-05T09:00:00",
      "end": "2019-09-05T18:00:00",
      "color: "#E0F8E0"
    },
    {
      "title": "Event 2",
      "start": "2019-09-08",
      "end": "2019-09-10",
      "color: "#E0F8E0"
    }
]

The docs describe other properties 您可以添加到您的活动中。

当下个月按钮点击全日历不起作用时触发事件

Trigger an event when next month button clicked on fullcalendar not working

javascript

php

ajax

fullcalendar

fullcalendar-3