如何正确使用JSON将Events / EventSources传递给FullCalendar?

问题描述 投票:2回答:2

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

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

还提到了使用本地时区日期(例如当前显示月份的范围)触发对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>
javascript php json fullcalendar fullcalendar-4
2个回答
2
投票

JSON需要是一个事件数组(即使数组只包含一个对象)。目前你有一个对象,而fullCalendar不会读取它。

让你的calendar.json文件看起来像这样:

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

您还需要稍微更改代码,以便将PHP $url变量视为PHP并进行渲染,同时将输出视为JS的字符串,而不是直接注入JS:

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

0
投票

如果你的php和fullcalendar在同一页面上,你可能需要这个

<?php
   $url = get_stylesheet_directory_uri() . '/calendar.json';
?>

<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: "<?php echo $url; ?>";
        });

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

记得检查calendar.json的输出。应该是这样的

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

-1
投票

我不太确定,如果这可以解决你的问题,我也不知道WordPress。但是,也许您可​​能尝试使用WordPress内置函数,也许在这种情况下,您可以尝试使用wp_remote_get或找到类似的函数来代替file_get_content()。因为,出于安全或许可的原因,您不能从某些URL获取内容,但不确定。

您可以使用chmod($url, 0000);对其进行测试,以查看是否允许您更改文件的权限。然后,如果是权限问题,您可以添加chmod()to您的脚本:

//Wordpress function for URL to the file location
$url = get_stylesheet_directory_uri() . '/calendar.json';
chmod($url, 0777);
//$data = file_get_contents($url);
$data = wp_remote_get($url);
$content = json_decode($data);
chmod($url, 0755);

echo $content->title;
echo $content->start;

您的PHP代码似乎没问题。也许,var_dump($url);确保一切都很好。

此外,您可能会尝试更改

events: $url;

events: <?php echo $url; ?>
© www.soinside.com 2019 - 2024. All rights reserved.