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

【问题标题】：How to pass php array with multiple title and start to fullCalendar 3如何传递具有多个标题的php数组并开始到fullCalendar 3
【发布时间】：2022-01-08 16:30:54
【问题描述】：

我有以下使用 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"
];

【问题讨论】：

创建一个嵌套的PHP事件数组，并使用JSON.parse解析JS中的数据。
如果我使用 PHP 嵌套数组，会是这样的$arrayDate = ["title" => ["SG-12345-0 : xx, yy", "SG-156645-0 : aa, bb", "SG-13435-0 : cc, dd", "SG-76864-0 : ee, ff"], "start" => ["2021-12-02", "2021-12-03", "2021-12-02", "2021-12-04"]];。但是我怎样才能将它与 JSON.parse 链接起来？抱歉我对JSON.parse不是很熟悉
我也对JSON.parse 做了以下操作。 var jArray = <?php echo json_encode($arrayDate); ?>; jArray = JSON.parse(jArray);。但是我又如何将它传递给events 作为title 和start？
var jArray = JSON.parse(<?= json_encode($arrayDate); ?>);。但是，关联的 PHP 数组必须是嵌套的，不要将内部数组包裹在字符串中。
旁注：你知道你的页面中有两个版本的jQuery吗？这有可能导致意想不到的问题。摆脱一个版本。

标签： javascript php jquery fullcalendar fullcalendar-3

【解决方案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 将在请求中发送开始和结束日期，以便您的服务器可以有效地仅提供与用户正在查看的日期相关的事件。

【讨论】：