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

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


我可以看到该网址有效,因为我可以通过php在我的wordpress网站中回显结果,但是我将JSON网址传递给JS脚本时,日历就崩溃了。我真的很head头。


还提到了prev / next按钮触发带有本地时区日期的GET到JSON(例如,当前显示月份的范围)。我应该如何对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>

      <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>


DIEA
浏览 179回答 3
3回答

烙印99

JSON必须是事件数组(即使该数组仅包含一个对象)。当前,您只有一个对象,fullCalendar不会读取该对象。使您的calendar.json文件如下所示:[&nbsp; {&nbsp; &nbsp; "title" : "something",&nbsp; &nbsp; "start" : "2019-04-23"&nbsp;&nbsp;&nbsp; }]您还需要稍稍更改代码,以便将您的PHP$url变量视为PHP并进行渲染,并且这样输出也将由JS视为字符串,而不仅仅是按原样注入JS:events: "<?php echo $url; ?>"

蛊毒传说

如果您的php和fullcalendar在同一页面上,则可能需要此页面<?php&nbsp; &nbsp;$url = get_stylesheet_directory_uri() . '/calendar.json';?><html>&nbsp; <head>&nbsp; &nbsp; <meta charset='utf-8' />&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; document.addEventListener('DOMContentLoaded', function() {&nbsp; &nbsp; &nbsp; &nbsp; var calendarEl = document.getElementById('calendar');&nbsp; &nbsp; &nbsp; &nbsp; var calendar = new FullCalendar.Calendar(calendarEl, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; plugins: [ 'dayGrid' ],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; events: "<?php echo $url; ?>";&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; calendar.render();&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; </script>&nbsp; </head>&nbsp; <body>&nbsp; &nbsp; <div id='calendar'></div>&nbsp; </body></html>记住检查一下calendar.json的输出。它看起来应该像这样&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "title" : "something",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "start" : "2019-04-23"&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ];

蝴蝶不菲

我不确定,是否可以解决您的问题,我也不了解WordPress。但是,也许您可以尝试使用WordPress内置函数,在这种情况下,您可以尝试wp_remote_get或找到类似的函数来代替file_get_content()。因为可能出于安全性或权限方面的原因,您不确定不能从某些URL获取内容。您可以对其进行测试,chmod($url, 0000);以查看是否允许您更改文件的权限。然后,如果是权限问题,则可以将其添加chmod()到脚本中://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; ?>
打开App,查看更多内容
随时随地看视频慕课网APP