Skip to main content

Fetching items from sharepoint list and attaching in Fullcalendar with JSOM

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())) ?

gunu
  • 75
  • 4
  • 12