Fullcalendar: chmar an external Json file

Asked

Viewed 694 times

3

Good afternoon, I am trying to upload an event to 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' 
       }";
?>

This way I can carry, but I would like to know how I do calling a JSON? tried in many ways ($.getJson, $.get, Json.parser(), etc...) Anyone have any tips?

javascript json

2 answers

1

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

$(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 want to pass an array and not just an object at a time. In this case Javascript can have events: events and in PHP do echo of an array. Remember that you can use the json_encode of PHP to generate JSON.

  • I don’t know AJAX, do you have a website that can tell me? I found the code $. ajax({ url: address, complete: Function(res){ var meuJSON = JSON.parse(res.responseText); console.log(meuJSON); } }); but I need an example to base myself on

  • @Joseleandro this code that you put in the commentary is a longer way to do what I put in the reply. Take a look here http://answall.com/a/25215/129, but at the bottom is what I put in the answer using the specific and simplified version of jQuery for AJAX + JSON, which is the getJSON. You tested my code?

  • @Also interesting: http://answall.com/a/116177/129

  • My Json condigo is { "events":[ { "title":"Jose", "start":"2016-09-01" } ] } I should modify something?

  • @Joseleandro already has this json in javascript with getJSON?

  • My code looks like this: index.php $. getJSON("events.json", Function(Event){ ... Events:[ Event ] } and my Json events.json { "events":[ { "title":"Jose", "start":"2016-09-01" } ] }

  • Place only the array in JSON, without the "{events:}"

  • So close, I put as you said, and put the Events: Alert(Event) And the answer I have is [Object Object] I started my search for knowledge again and the only answer I find is that I don’t need JSON.parse, but the error happens if I don’t use itlo and using it is occurring Syntaxerror JSON.parse, and my code is like this: var Objecting = JSON.parse(Event); and my events. Json looks like this: [ { "title":"Jose", "start":"2016-09-01" } ]

  • The error is: Unexpected Character at line 1 column 2 of the JSON data

  • @Joseleandro in PHP puts it like this: echo '[{"title":"Jose", "start":"2016-09-01"}]'; and Javascript as follows: http://jsfiddle.net/hge7Lxza/

  • This way it works, but this way I have to use a php file, know if I could do the same thing only with a file . Json?

  • @Joseleandro in the same way... http://jsfiddle.net/hge7Lxza/1/ and in the file .json only [{"title":"Jose", "start":"2016-09-01"}] no quotation marks before or after.

  • Good morning, I tested, but it returns [Object Object]. I did a test only with $.get and it’s returning me [ { "title":"Jose", "start":"2016-11-01" } ] which is what I need to return to Events: from the full calendar I can read, but the "Events:" from the full calendar doesn’t read, would you tell me why? Main.php $. get("events.json", Function(varEventos){ Events: varEventos } events.json [ { "title":"Jose", "start":"2016-11-01" } ]

Show 8 more comments

0


I use the 'Events' of the fullcalendar itself, follow the code:

events: function(start, end, timezone, callback) {

   //chama o ajax e retorna um  result/promise com os dados 'data'
   	var events = []; //create array to events
		$.each(data, function(index, val) { //passa por cada resultado do array
			events.push({							//adiciona os dados no array 'events'
				title: val.title,
				start: val.start,
			})
		});
		callback(events); //callback que irá preencher o calendário, com o array de eventos.
	}
},

It will load all events returned from ajax, in the calendar, any questions, just contact.

  • I appreciate the answer, but my question is how to call a JSON file, as I upload it to you

  • After 2 days of struggling, your answer was the one that solved my problem. Thank you very much

Browser other questions tagged javascript json

You are not signed in. Login or sign up in order to post.