时间戳

首页 > 解决方案 > 如何正确使用 JSON 将事件/事件源传递给 FullCalendar？

javascript - 如何正确使用 JSON 将事件/事件源传递给 FullCalendar？

问题描述

我的最终目标是通过 JSON 动态传递 eventSources。在我开始动态生成 JSON 内容之前，我正在尝试使用文档示例通过 JSON URL 将一个简单的单个事件传递到我的事件标记中，手动编写。

我可以看到 URL 有效，因为我可以通过 php 在我的 wordpress 网站中回显结果，但是我传递 JSON URL 的 JS 脚本只会使日历崩溃。我真的在这个问题上摸不着头脑。

还提到了使用本地时区日期（例如当前显示月份的范围）触发对 JSON 的 GET 的 prev/next 按钮。我应该如何语法化 json 以便让事件调用找到数据点范围？我真的对这一切感到困惑。

JSON 文件：calendar.json


{
    "title" : "something",
    "start" : "2019-04-23"  
}

PHP 文件：page-calendar.php

<?php
    //Wordpress function for URL to the file location
    $url = get_stylesheet_directory_uri() . '/calendar.json'; 
    $data = file_get_contents($url);
    $content = json_decode($data);

    echo $content->title; // Just to test if the URL works 
    echo $content->start; // This echos just fine

    ?>
<html lang='en'>
      <head>
        <meta charset='utf-8' />
        <script>
          document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
              plugins: [ 'dayGrid' ],

              events: $url;
            });

            calendar.render();
          });
        </script>
      </head>
      <body>
        <div id='calendar'></div>
      </body>
</html>

标签： javascriptphpjsonfullcalendarfullcalendar-4

解决方案

JSON 需要是一个事件数组（即使该数组只包含一个对象）。目前您只有一个对象，而 fullCalendar 不会读取它。

使您的calendar.json文件如下所示：

[
  {
    "title" : "something",
    "start" : "2019-04-23"  
  }
]

您还需要稍微更改代码，以便您的 PHP$url变量被视为 PHP 并呈现，并且输出被 JS 视为字符串，而不仅仅是按原样注入 JS：

events: "<?php echo $url; ?>"

推荐阅读