当下个月按钮单击完整日历时触发事件不起作用

Posted 2023-02-19

【中文标题】当下个月按钮单击完整日历时触发事件不起作用

【英文标题】：Trigger an event when next month button clicked on fullcalendar not working

【发布时间】：2022-01-13 22:04:27

【问题描述】：

我有以下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 时，它始终只显示默认数据。有人可以帮我解决这个问题吗？

【问题讨论】：

1) 如果您使用事件源的 URL 配置 Fullcalendar，它会在您导航时自动检索新事件。你不需要做任何事情。 From the docs: “FullCalendar 将在需要新事件数据时访问 URL。当用户单击 prev/next 或更改视图时会发生这种情况。FullCalendar 将确定它需要事件的日期范围，并将传递该信息在 GET 参数中。".

2) 整个架构比它需要的复杂得多。 Fullcalendar 将处理所有这些。无需对文档进行 AJAX 调用；完成 AJAX 后无需 populateCalendar() ... 只需设置 Fullcalendar，告诉它您有事件的 JSON 提要。我建议在生成提要的 PHP 中添加您的颜色、标题等。

@Don'tPanic 感谢 cmets。我是fullCalendar 的新手，仍在探索它。所以我仍然需要检查你推荐的方式

如果您是 fullCalendar 的新手，请不要使用旧的基于 jQuery 的版本，就像您在上面所做的那样，使用更高效且功能更多的最新 v5。 （当然，如果您愿意，这并不妨碍您在同一页面的其他地方使用 jQuery。）

【参考方案1】：

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

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

如果您未指定 initialDate (v5)（或 defaultDate in v3），它将默认为当前日期 - 因此无需设置当前日期。

如果您为 events: 配置 JSON 提要，Fullcalendar 将使用 GET 来请求它们。如果你想使用 POST，你可以这样做，using the eventSources extended format (v5) (or v3)。但是，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 对这两个合并的结果集做了什么。但只要您从如下所示的数组生成 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您可以添加到您的活动中。

【讨论】：

1.您的fullCalendar 中有两个events。这是一个错字吗？ 2. 使用这种方法，如何将选定的月份和选定的日期传递给 php 文件，以便我的查询可以使用它们来获取数据？

小心...OP 正在使用 fullCalendar 3，但此答案中的文档链接适用于 v5。我认为 OP 应该升级，因为他们说他们才刚刚开始使用 fullCalendar，但链接应该真正回答问题中使用的版本的问题。否则，很好的答案。

@Anu 是的，谢谢，错字，我写得很快，有点粗心。固定的。回复：通过日期 - 如果您查看我包含在事件文档中的链接，您会看到 Fullcalendar 自动执行此操作，格式为：?start=2013-12-01&end=2014-01-12，其中这些日期是当前视图的开始/结束。

@ADyson - 谢谢，我错过了，写得太快而且草率。已更新。