單擊 fullcalendar 上的下個月按鈕不起作用時觸發事件

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("Ymd", 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時，它始終只顯示默認數據。 有人可以幫我嗎？

Answer 1

你能顯示 selectedMonth 和 selectedYear 上的內容嗎

console.log(selectedMonth, selectedYear)

Answer 2

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

• 如果您不指定initialDate ，它將默認為當前日期 - 因此無需設置當前日期。

• 如果您為events: ，Fullcalendar 將使用 GET 請求它們。 如果你想使用 POST，你可以使用eventSources擴展格式。 但是， 約定是POST 用於更改數據（例如進行購買、更新記錄），而 GET 用於讀取數據。 AFAICT 你只是在加載事件數據，這應該是一個 GET。 我建議堅持約定並更新您的后端以響應 GET 而不是 POST。

• Fullcalendar 將在需要新數據時自動向您的事件提要發出新請求，例如當您導航到新月份時。 無需添加任何代碼來手動處理。

JS：

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

我不確定您的 PHP 對 2 個合並的結果集做了什么。 但只要您從如下所示的數組生成 JSON 提要：

[
    {
      "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"
    }
]

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