如何传递具有多个标题的 php 数组并开始到 fullCalendar 3

Question

我有以下使用 fullCalendar 3 的日历

$(document).ready(function() {
  $('#calendar').fullCalendar({

    defaultDate: '2021-12-02',
    eventLimit: true, // allow "more" link when too many events
    events: [{
        title: 'All Day Event',
        start: '2021-12-02'
      },
      {
        title: 'Long Event',
        start: '2021-12-02',
        end: '2021-12-4'
      },
      {
        title: 'Click for Google',
        url: 'https://google.com/',
        start: '2021-12-24'
      }
    ]
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.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>
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <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">
  <title>Sample</title>
</head>

<body>
  <div class="ui container">
    <div class="ui grid">
      <div class="ui sixteen column">
        <div id="calendar"></div>
      </div>
    </div>
  </div>
</body>

</html>

现在我有一个PHP数组如下

$arrayDate = [
  "title" => "SG-12345-0 : xx, yy", 
  "start" => "2021-12-02"
];

我通过如下修改初始 jQuery 代码将此数组传递给 events

$(document).ready(function() {
    var jArray = <?php echo json_encode($arrayDate); ?>;
    console.log(jArray);

    $('#calendar').fullCalendar({

      defaultDate: '2021-12-02',
      eventLimit: true, // allow "more" link when too many events
      events: [jArray]
    });
    
  });

它工作正常。但我需要知道的是，如果我的 php 数组包含多个开始日期和标题，我如何传递多个 title 和 start 键？

例如：对于像下面这样的数组

$arrayDate = [
  "2021-12-02" => "SG-12345-0 : xx, yy", 
  "2021-12-03" => "SG-156645-0 : aa, bb", 
  "2021-12-02" => "SG-13435-0 : cc, dd", 
  "2021-12-04" => "SG-76864-0 : ee, ff"
];

Answer 1

为了将事件传递给 fullCalendar，您的数组需要位于 format which fullCalendar understands - 即在每个事件中指定正确的属性名称。

所以对于多个事件，在 PHP 中会是这样的：

$arrayDate = [
  ["start" => "2021-12-02", "title" => "SG-12345-0 : xx, yy"], 
  ["start" => "2021-12-03", "title => "SG-156645-0 : aa, bb"], 
  ["start" => "2021-12-02", "title" => "SG-13435-0 : cc, dd"], 
  ["start" => "2021-12-04", "title" => "SG-76864-0 : ee, ff"]
];

当JSON编码时，这将作为一个现成的JSON数组出来，如果你直接将它注入JS代码，你可以直接回显它'将被视为 JS 中的文字（即，就像它是硬编码的一样），因此您不需要解析它。

例如在您的日历配置中，您可以只写：

events: <?php echo json_encode($arrayDate); ?>

不过，我总是建议使用 fullCalendar 更复杂的事件源方法，而不是直接注入数据。有关详细信息，请参阅 https://fullcalendar.io/docs/v3/events-json-feed。在这种方法中，您只需给 fullCalendar 一个 URL ，它就可以在需要时去获取事件。首次加载日历时，它将自动向 URL（通过 AJAX）发出请求，如果用户将日历的日期范围更改为尚未下载任何事件的日期，则稍后再次请求. URL 处的 PHP 脚本应获取相关事件并仅回显 JSON 编码的事件数据。 FullCalendar 将在请求中发送开始日期和结束日期，因此您的服务器可以有效地仅提供与用户正在查看的日期相关的事件。

如何传递具有多个标题的 php 数组并开始到 fullCalendar 3

How to pass php array with multiple title and start to fullCalendar 3

javascript

php

jquery

fullcalendar

fullcalendar-3