How do I use JSON properly to pass Events/EventSources to FullCalendar?

2
votes

My end goal to pass eventSources via JSON dynamically. Before I even get to producing the JSON content dynamically, I am trying to use the documentation example to pass a simple single event via a JSON URL into my event tag, written manually.

I can see the URL works because I can echo the results in my wordpress website via php, but the JS script i'm passing the JSON URL to just crashes the calendar. I'm really scratching my head on this one.

There's also mention of the prev/next buttons triggering a GET to the JSON with the local timezone dates (say for the range of the currently displayed month). How am I supposed to syntax the json so as to have the event call find the data points range? I'm just really confused about all this.

JSON File: calendar.json 


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

PHP File: 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
javascriptphpjsonfullcalendarfullcalendar-4
That doesn't work either :/. I think being inside the event from the DOM restricts heavily the kind of things I can pass, In the FullCalendar documentation it seems to explicitly define a URL to a PHP file (wondering if sending it to a JSON file is the problem here.) Could a PHP file called with a GET (which the event tag does I believe) return a JSON response? No idea how this works honestly – Sigma

3 Answers

2
votes

The JSON needs to be an array of events (even if the array only contains one object). Currently you have a single object, and fullCalendar won't read that.

Make your calendar.json file look like this:

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

You'll also need to change the code a bit so that your PHP $url variable is treated as PHP and rendered, and also so the output is treated as a string by JS, not just injected into the JS as-is:

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

If your php and fullcalendar is on the same page you may need this

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

Remember to check your output of calendar.json. It should look like so

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

I'm not really sure, if this might solve your problem, also I don't know about WordPress. However, maybe you might try using WordPress built-in functions, maybe in this case, you might try wp_remote_get or find similar functions to use instead of file_get_content(). Because, maybe for security or permission reasons, you are not allowed to get contents from some URLs, not sure.

You might test it with chmod($url, 0000); to see if you are allowed to change the permission of the file. Then, if it was a permission issue, you could just add chmod()to your script: 

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

Your PHP codes seem to be fine. Maybe, var_dump($url); to make sure everything is fine.

Also, you might try changing 

events: $url;

to 

events: <?php echo $url; ?>