當下個月按鈕單擊全日歷不起作用時觸發事件-有解無憂

我有以下內容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);
    }
  });
});

我nextResults從Ajax電話中得到了正確的資訊。

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

但不知何故，當我單擊下一步按鈕時，事件沒有顯示。fullcalendar首次加載時，它始終僅顯示默認資料。有人可以幫我嗎？

uj5u.com熱心網友回復：

更新：正如評論中指出的（感謝@ADyson），您的 JS 正在參考 Fullcalendar v3。現在已經很老了，v5 是最新的。我的原始答案參考了 v5 檔案，我也更新了 v3 鏈接/選項。

這是一個超級簡單的例子。筆記：

如果您不指定initialDate(v5)，（或defaultDate在 v3 中），它將默認為當前日期 - 因此無需設定當前日期。
如果您為配置 JSON 提要events:，Fullcalendar 將使用 GET 來請求它們。如果您想使用 POST，您可以使用eventSources擴展格式 (v5)（或 v3）來實作。然而，慣例是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"
    }
]

這些檔案描述了您可以添加到事件中的其他屬性。

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/378621.html

標籤：javascript php 阿贾克斯全日历 fullcalendar-3

上一篇：路由在參考時正在作業，但是當我轉到提供的鏈接時，它不會在laravel中找到控制器功能

下一篇：從PHP填充下拉串列