Upload data with Ajax to fullcalendar

0

I am working with a Jquery Plugin called FullCalendar and I intend to send the events from an ajax call but I am super novice with it, I have the following code:

HTML:

<div id='calendar'></div>

JavaScript:

$(document).ready(function () {

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay,listWeek'
            },
            defaultDate: '2017-09-12',
            navLinks: true, // can click day/week names to navigate views
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: 
               [
                    {
                        "start": "2017-10-20 07:00:00",
                        "title": "Work"
                    }
               ]


        });

    });

But instead of having the static events, I want something like the following example, which I found on the internet, but actually I do not know why it does not work for me:

Example of sending data:

$(document).ready(function () {

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay,listWeek'
            },
            defaultDate: '2017-09-12',
            navLinks: true, // can click day/week names to navigate views
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: function (start, end, timezone, callback) {
                $.ajax({
                    url: 'work-events.json',
                    type: "GET",
                    datatype: 'json',
                    success: function (doc) {
                        var events = [];
                        if ($(doc) != undefined && $(doc).Events.length > 0) {
                            $(doc).Events.forEach(function (entry) {
                                events.push({
                                    title: entry.Title,
                                    start: entry.Start,
                                    className: entry.className
                                });

                            });
                        }
                        callback(events);
                    },
                    error: function (err) {
                        alert('Error in fetching data');
                    }
                });
            },
            defaultView: 'agendaWeek',
            eventClick: function (calEvent, jsEvent, view) {
                alert(calEvent.title);
            }


        });

    });

at the moment of running it, it sends me the error alert:

  

alert ('Error in fetching data');

this is my JSON file:

[
  {
    "start": "2016-01-02 07:00:00",
    "title": "Work",
    "className": "Work",
    "allDay": "FALSE"
  },
  {
    "start": "2016-01-02 08:00:00",
    "title": "Work",
    "className": "Work",
    "allDay": "FALSE"
  },
  {
    "start": "2016-01-02 09:00:00",
    "title": "Work",
    "className": "Work",
    "allDay": "FALSE"
  }
]

is much bigger, but for you to know what I have, the whole file has the same structure, I tried manually and if I painted all the events, so it is not JSON error.

    
asked by Roger 18.10.2017 в 21:48
source

0 answers