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

Posted

技术标签:

【中文标题】当下个月按钮单击完整日历时触发事件不起作用【英文标题】: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&amp;end=2014-01-12,其中这些日期是当前视图的开始/结束。 @ADyson - 谢谢,我错过了,写得太快而且草率。已更新。

以上是关于当下个月按钮单击完整日历时触发事件不起作用的主要内容,如果未能解决你的问题,请参考以下文章

Jquery移动按钮点击角落不起作用

Jquery按钮单击事件不起作用

为啥事件触发器在统一 2d 中不起作用?

使用 ajax 时,Tablesorter 禁用分页器按钮不起作用

离子按钮单击上的事件 preventDefault 不起作用

UITextField 触摸事件在 UIScrollView 中不起作用