javascript – FullCalendar: call an external Json file

Question:

Good afternoon, I'm trying to load an event on FullCalendar. The problem is this

$(document).ready(function() {
    $('#calendar').fullCalendar({
        header: {
                left: 'today',
                center: 'prev, title, next',
                right: 'month,basicWeek,basicDay'
            },
                        eventClick:  function(event) {
                             $('#modalTitle').html(event.title);
                             $('#modalBody').html(event.description);
                             $('#eventUrl').attr('href',event.url);
                             $('#fullCalModal').modal();
                             return false;
                        },
            navLinks: true, // can click day/week names to navigate views
            editable: true,
            eventLimit: true, // allow "more" link when too many events
                events:[
                    <?php include('process.php') ?>
               ]
      });
});

Process.PHP

<?php
    $title = "Jose";
    $start = "2016-11-01";

echo "{
       title: '$title' ,
       start: '$start' 
       }";
?>

That way I can load it, but I would like to know how I do it by calling a JSON? I tried it in several ways ($.getJson, $.get, Json.parser(), etc…) Does anyone have any tips?

Answer:

You can use ajax to fetch that JSON and when ajax completes run the code you have. Something like:

$(document).ready(function() {
    $.getJSON("/Process.PHP", function(event) {
        $('#calendar').fullCalendar({
            header: {
                left: 'today',
                center: 'prev, title, next',
                right: 'month,basicWeek,basicDay'
            },
            eventClick: function(event) {
                $('#modalTitle').html(event.title);
                $('#modalBody').html(event.description);
                $('#eventUrl').attr('href', event.url);
                $('#fullCalModal').modal();
                return false;
            },
            navLinks: true, // can click day/week names to navigate views
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: [event]
        });
    });
});

Eventually you'll want to pass an array and not just one object at a time. In this case in JavaScript you can have events: events and in PHP echo an array. Remember that you can use PHP's json_encode to generate JSON.

Scroll to Top
AllEscort