jQuery fullcalendar 发送自定义参数并使用 JSON 刷新日历

html
<link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=JS.cloudflare.com/Ajax/libs/fullcalendar/3.10.2/fullcalendar.min.CSS">https://cdnJS.cloudflare.com/Ajax/libs/fullcalendar/3.10.2/fullcalendar.min.CSS</a>" />
<script src="https://cdnJS.cloudflare.com/Ajax/libs/jquery/3.3.1/jquery.min.JS"></script>
<script src="https://cdnJS.cloudflare.com/Ajax/libs/moment.JS/2.22.2/moment.min.JS"></script>
<script src="https://cdnJS.cloudflare.com/Ajax/libs/fullcalendar/3.10.2/fullcalendar.min.JS"></script>

元素作为容器来显示日历：

html
<div id="calendar"></div>

现在，我们可以编写JavaScript代码来初始化FullCalendar并发送自定义参数以获取JSON数据。假设我们需要根据特定的日期范围来获取事件列表。首先，我们需要在服务器端创建一个能够接收日期范围参数的接口，并返回相应的JSON数据。

以下是一个简单的php接口示例，用于返回特定日期范围内的事件列表：

php
<?php</p>// 获取起始日期和结束日期参数
$start = $_GET['start'];
$end = $_GET['end'];
// 根据日期范围查询事件列表，并将结果转为JSON格式
$events = getEventsFromDatabase($start, $end);
echo JSon_encode($events);
?>

在JavaScript代码中，我们需要使用FullCalendar的events选项来指定获取事件数据的URL，并发送自定义参数。以下是相应的JavaScript代码示例：

Javascript
$(document).ready(function() {
  $('#calendar').fullCalendar({
    events: {
      url: 'events.php', // 替换为你的接口URL
      type: 'GET',
      data: function() {
        return {
          start: $('#calendar').fullCalendar('getView').start.format(),
          end: $('#calendar').fullCalendar('getView').end.format()
        };
      },
      success: function(response) {
        // 在成功获取数据后，更新日历的事件列表
        $('#calendar').fullCalendar('removeEvents');
        $('#calendar').fullCalendar('addEventSource', response);
        $('#calendar').fullCalendar('rerenderEvents');
      }
    }
  });
});

在上述代码中，我们使用FullCalendar的getView方法来获取当前日历的起始日期和结束日期，并将其作为自定义参数发送给服务器端接口。在成功获取JSON数据后，我们使用FullCalendar的相关方法来更新日历的事件列表。

示例代码：

html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=JS.cloudflare.com/Ajax/libs/fullcalendar/3.10.2/fullcalendar.min.CSS">https://cdnJS.cloudflare.com/Ajax/libs/fullcalendar/3.10.2/fullcalendar.min.CSS</a>" />
  <script src="https://cdnJS.cloudflare.com/Ajax/libs/jquery/3.3.1/jquery.min.JS"></script>
  <script src="https://cdnJS.cloudflare.com/Ajax/libs/moment.JS/2.22.2/moment.min.JS"></script>
  <script src="https://cdnJS.cloudflare.com/Ajax/libs/fullcalendar/3.10.2/fullcalendar.min.JS"></script>
</head>
<body>
  <div id="calendar"></div>
  <script>
    $(document).ready(function() {
      $('#calendar').fullCalendar({
        events: {
          url: 'events.php', // 替换为你的接口URL
          type: 'GET',
          data: function() {
            return {
              start: $('#calendar').fullCalendar('getView').start.format(),
              end: $('#calendar').fullCalendar('getView').end.format()
            };
          },
          success: function(response) {
            // 在成功获取数据后，更新日历的事件列表
            $('#calendar').fullCalendar('removeEvents');
            $('#calendar').fullCalendar('addEventSource', response);
            $('#calendar').fullCalendar('rerenderEvents');
          }
        }
      });
    });
  </script>
</body>
</html>

通过本文，我们了解了如何使用jQuery FullCalendar插件发送自定义参数并使用JSON数据刷新日历。通过发送自定义参数，我们可以根据特定的需求获取事件列表，并使用JSON数据来更新日历的内容。这种方法可以让我们更灵活地控制日历的显示和行为，并与服务器端进行交互。希望本文对您了解和使用FullCalendar插件有所帮助！

参考资料：

- FullCalendar官方文档：https://fullcalendar.io/docs

- jQuery官方文档：https://api.jquery.com/