Fetching items from sharepoint list and attaching in Fullcalendar with JSOM

Question

I'm relatively new to sharepoint development. I want to load events from sharepoint list to fullcalendar month view. How can I achieve that with JSOM(not with REST api)? So far I can add to the list from the calendar but I can not see the saved item (event) on the calendar when I refresh the page .

I apperciate any kind of tips.

Here is the code so far I have tried:

var query = new SP.CamlQuery();
var textCAML = '<View><Query><RowLimit></RowLimit>15 </Query></View>';
query.set_viewXml(textCAML);

var items = list.getItems(query);


clientContext.load(items);
//Execute the Query Asynchronously
clientContext.executeQueryAsync(onSuccess, onFail);
function onSuccess() {
var enumerator = items.getEnumerator();

for (var i = 0; i < enumerator.length; i++) {
    var currentListItem = enumerator.get_current();
    NewEvents.push({
        ID: enumerator[i].get_id(),
        title: enumerator[i].get_item('task')
    });
}
}

function onFail(sender, args) {
    alert(args.get_message());
}



function CalendarSetup() {
schedulecCalendar = $('#myCalendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: ''
    },
    theme: true,
    defaultView: 'month',
    selectable: true,
    events: NewEvents,
    selectHelper: true,
    height: 500,
    rendering: true,
    select: function (start, end, allDay) {
        $('#txtDate').datepicker("setDate", new Date(start));
        $(".collapse").collapse('show');
    },
    editable: true,

    eventClick: function (calEvent, jsEvent, view) {
        $('#eventTitle').val(calEvent.title);
        $('#calEventDialog #allday').val([calEvent.className == "gbcs-halfday-event" ? "1" : "2"]).prop('checked', true);
        $("#calEventDialog").dialog();

        $("#calEventDialog").dialog("option", "buttons", [
          {
              text: "Edit",
              click: function () {
                  calEvent.title = $('#eventTitle').val();
                  $('#myCalendar').fullCalendar('updateEvent', calEvent);
                  $(this).dialog("close");
              }
          },
        {
            text: "Delete",
            click: function () {
                $('#myCalendar').fullCalendar('removeEvents', calEvent._id);
                $(this).dialog("close");
            }
        },
        {
            text: "Cancel",
            click: function () {
                $(this).dialog("close");
            }
        }
        ]);
        $("#calEventDialog").dialog("option", "title", "Edit Event");
        $('#calEventDialog').dialog('open');
    },
});
}

The newEvent array couldn't fetch events from the SharePoint list.

I used the camel query but still couldn't fetch. Should I use while((enumerator.moveNext())) ?

Answer 1

I do things a little differently with my JSOM code. I have a generic function and use deferred variables. Here is a working example that I used CDNS for.

You should be able to drop this into a page and it will show a fullcal(although not with some of the other functions you defined)

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.1/fullcalendar.css" />
<script>
    $(document).ready(function() {

        LoadSodByKey("sp.js", function() {


            getCalendarData();

        });

    });


    function getCalendarData() {
        var deferred = jQuery.Deferred();
        var camlQuery = "<View><Query><RowLimit></RowLimit>15 </Query></View>"
        new getListData(deferred, "Calendar", camlQuery);



        deferred.done(function(n) {
            var NewEvents = [];

            $.each(n, function(i, v) {

                NewEvents.push({
                        'title': v.Title,
                        start: v.EventDate.toDateString()
                    }

                );

            });

            //console.log(NewEvents);
            CalendarSetup(NewEvents);
        });

    }


    function getListData(deferredObj, listName, mycamlQuery) {
        //this is necessary to ensure the library is loaded before function triggered
        var clientContext = new SP.ClientContext.get_current();
        this.camlText = mycamlQuery;
        this.listName = listName
        this.dfd = jQuery.Deferred();
        this.dfd.done(function(n) {
            deferredObj.resolve(n);
        });
        this.myList = clientContext.get_web().get_lists().getByTitle(listName); //actual list name here
        this.camlQuery = new SP.CamlQuery();
        this.camlQuery.set_viewXml(mycamlQuery); //caml statement goes here between the single quotes
        this.namedListItem = this.myList.getItems(this.camlQuery);
        this.listResults = clientContext.loadQuery(this.namedListItem);
        clientContext.executeQueryAsync(Function.createDelegate(this, onQuerySucceeded), Function.createDelegate(this, onQueryFailed));
    }

    function onQuerySucceeded(sender, args) {
        this.returnedObjects = [];
        for (var i = 0; i < this.listResults.length; i++) {
            this.returnedObjects.push(this.listResults[i].get_fieldValues());
        }
        this.dfd.resolve(this.returnedObjects);
    }

    function onQueryFailed(sender, args) {
        var failMessage = 'Request failed. ' + args.get_message() + '\n' + args.get_stackTrace();
        console.log(failMessage);
        if (this.camlText) {
            console.log(this.camlText)
        }
        if (this.listName) {
            console.log(this.listName)
        }
        SP.UI.Notify.addNotification(failMessage, true);
    }




    function CalendarSetup(NewEvents) {
        schedulecCalendar = $('#myCalendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: ''
            },
            theme: true,
            defaultView: 'month',
            selectable: true,
            events: NewEvents,
            selectHelper: true,
            height: 500,
            rendering: true,
            select: function(start, end, allDay) {
                $('#txtDate').datepicker("setDate", new Date(start));
                $(".collapse").collapse('show');
            },
            editable: true,

            eventClick: function(calEvent, jsEvent, view) {
                $('#eventTitle').val(calEvent.title);
                $('#calEventDialog #allday').val([calEvent.className == "gbcs-halfday-event" ? "1" : "2"]).prop('checked', true);
                $("#calEventDialog").dialog();

                $("#calEventDialog").dialog("option", "buttons", [{
                    text: "Edit",
                    click: function() {
                        calEvent.title = $('#eventTitle').val();
                        $('#myCalendar').fullCalendar('updateEvent', calEvent);
                        $(this).dialog("close");
                    }
                }, {
                    text: "Delete",
                    click: function() {
                        $('#myCalendar').fullCalendar('removeEvents', calEvent._id);
                        $(this).dialog("close");
                    }
                }, {
                    text: "Cancel",
                    click: function() {
                        $(this).dialog("close");
                    }
                }]);
                $("#calEventDialog").dialog("option", "title", "Edit Event");
                $('#calEventDialog').dialog('open');
            },
        });
    }
</script>

<div id="myCalendar"></div>