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

fullcalendar events json example
fullcalendar events example
fullcalendar load events json
fullcalendar events: function
fullcalendar get events array
full calendar ajax json example
fullcalendar event sources example
json calendar example

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>

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

events (as a json feed), A URL of a JSON feed that the calendar will fetch Event Objects from. it needs events for and will pass that information along in GET parameters. you are using the eventSources option to specify multiple event sources� A URL of a JSON feed that the calendar will fetch Event Objects from. FullCalendar will visit the URL whenever it needs new event data. This happens when the user clicks prev/next or changes views. FullCalendar will determine the date-range it needs events for and will pass that information along in GET parameters.

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"  
             }
            ];

events (as a json feed), Visiting the URL of a JSON feed is one of the ways FullCalendar fetches it needs events for and will pass that information along in GET parameters. using the eventSources option to specify multiple event sources and you� An “event source” is anything that provides FullCalendar with data about events. It can be a simple array, an event-generating function that you define, a URL to a json feed, or a Google Calendar feed. Event Objects can have “options” associated with them.

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

events (as an array), This often comes in handy when you are using the eventSources option to specify multiple event sources and you want certain options to only� However, if you have the choice, JSON is a better idea because you can just specify a feed URL. Extended Form. You can specify Event Source options. This often comes in handy when you are using the eventSources option to specify multiple event sources and you want certain options to only apply to certain sources. However, to do this, you must

Jquery Full Calendar json event source syntax, I'm trying to use full calendar to load events from a json source. What is the proper way to get the events from a json url; How do I go about generating FullCalendar will determine the date-range it needs events for and will pass that fullCalendar({ eventSources: [ // your event source { url: '/myfeed.php', // use the You� Visiting the URL of a JSON feed is one of the ways FullCalendar fetches Event Objects. This action occurs when the user clicks prev/next or changes calendar views. FullCalendar will determine the date-range it needs events for and will pass that information along in GET parameters. events (as a function)

How to parse json data and implement fullcalendar correctly ?, I have project that supposed to display calendar with dynamic load events. and also i want to know,is this step good to implement fullcalendar.io in laravel? render an event upon drop $(this).data('event', { title: $.trim($(this).text()), // use the� So we build the JSON feed URLs and use them as the eventSources parameter for the fullCalendar (Instead of using events as the events source, we'll use eventSources since we have an array). Then, attach a change event to #e1, #e2, and #e3 so that events are repulled every time a filter event occurs:

v2.9.0 (2016-07-10) -------------------, See [docs](http://fullcalendar.io/docs/utilities/dynamic_options/) for more info. flicker when refetchEvents is called (#3123, #2558) - fix for removing event sources that can benefit from: - EventEmitter not correctly working with stopListeningTo `bower.json` instead of `component.json` ([PR 125]) - use bower internally for� I have the web handler to generate the correct meeting json feed using the date from the database. I make the SQL to return just one meeting on the 11/15/2011 to test. If I just run the web handler part ashx, it will return this

Comments
  • 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
  • That was it. Thank you so much. You seem like the person active around the FullCalendar tag lol expect to see more dumb questions from me pop up. Truly appreciate your help.
  • 1) What is the point of making PHP read the file and then pass it onto the page, when the URL of the JSON file could be given to fullCalendar directly? 2) Even if it were necessary for PHP to read the JSON file, what is the point of decoding it and then immediately encoding it again straight afterwards? You just end up with the same result you started with. This answer involves pointless make-work and unnecessary code.
  • @ADyson you are right. I totally missed that he is calling .json file already. I thought he is calling another api which is then decoded to json. I am going to update my answer.
  • file_get_content works. I'm using it to echo my URL information as a test. But i'm not using that variable inside the script. I'm using the $URL just before which is the path to the JSON file location. Unfortunately, the var_dump isn't working either