Как правильно использовать JSON для передачи событий / источников событий в FullCalendar? - PullRequest
Новая
       15

Как правильно использовать JSON для передачи событий / источников событий в FullCalendar?

2 голосов
/ 24 апреля 2019

Моя конечная цель - динамически передавать источники событий через JSON. Прежде чем я смогу динамически создавать контент JSON, я пытаюсь использовать пример документации для передачи простого одиночного события через URL-адрес JSON в мой тег события, написанный вручную.

Я вижу, что URL работает, потому что я могу отображать результаты на моем WordPress-сайте через php, но JS-скрипт, который я передаю JSON-URL, просто сбивает календарь. Я действительно почесал голову от этого.

Также есть упоминание о кнопках 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 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>

Ответы [ 3 ]

2 голосов
/ 24 апреля 2019

JSON должен быть массивом событий (даже если массив содержит только один объект). В настоящее время у вас есть один объект, и fullCalendar не будет читать это.

Сделайте так, чтобы ваш calendar.json файл выглядел так: 

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

Вам также необходимо немного изменить код, чтобы переменная PHP $url обрабатывалась как PHP и отображалась, а также чтобы вывод обрабатывался JS как строка, а не просто вставлялся в JS как это: 

events: "<?php echo $url; ?>"
0 голосов
/ 24 апреля 2019

Если ваш 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"  
             }
            ];
0 голосов
/ 24 апреля 2019

Я не совсем уверен, если это может решить вашу проблему, также я не знаю о 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; ?>
...