Events and AsyncQuery from SharePoint 2013 list

Question

I'm using a SharePoint 2013 list as the events source. Nothing special there as it's used as a data table.

I'm using the Client Javascript API and getting items (from the list) with the function executeQueryAsync

Here is the code

    var clientContext = new SP.ClientContext.get_current();
    oWebsite = clientContext.get_web();
    var oList = oWebsite.get_lists().getByTitle('EventsList');
    var camlQuery = new SP.CamlQuery();

    camlQuery.set_viewXml("<View><ViewFields><FieldRefName='ID' /><FieldRef Name='Title' /><FieldRef Name='EventDate' /><FieldRef Name='EndDate' /></ViewFields><Query><Where><And><Geq><FieldRef Name='EventDate'/><Value Type='DateTime'>" + startDate + "</Value></Geq><Leq><FieldRef Name='EndDate'/><Value Type='DateTime'>" + endDate + "</Value></Leq></And></Where></Query></View>");

    this.collListItem = oList.getItems(camlQuery);
    clientContext.load(collListItem);
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

The problem I'm facing is that the deletegatefunction triggers only when the AsyncQuery is complete. The onQuerySucceeded function is as followed

function onQuerySucceeded(sender, args) {
    var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator();

    eventSourceArray.push({ title: 'Test Event', start: '2017-02-08' });

    while (listItemEnumerator.moveNext()) {
        alert(listItemEnumerator);
        var oListItem = listItemEnumerator.get_current();
        listItemInfo += '\nID: ' + oListItem.get_id() +
        alert(oListItem.get_item('Title'));
    }

}

The "alert" is only for testing purpose. If I put alerts into this function, it is displayed. However the event that is pushed into the source is not displayed. I'm looking for a way to refresh the calendar once the query is complete.

UPDATE: The events I want to show are populated asynchronously in the eventSourceArray which is used as the Events source (see the code below)

jQuery('#calendrier').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultDate: today,
        lang: 'fr-ca',
        buttonIcons: true,
        weekNumbers: false,
        editable: false,
        eventLimit: true,
        events: eventSourceArray
    });

Now I'm looking for a way to reload the calendar or have the added events in the Array to show even if the page is already loaded.

UPDATE:

I tried this, but it has no effect. https://fullcalendar.io/docs/event_data/addEventSource/

jQuery('#calendrier').fullCalendar('refetchEventSources', eventSourceArray);

I added an alert to display the length of the array (eventSourceArray) and the items are all there)

UPDATE:

Tried resetting the events with my array

events: eventSourceArray

and then calling the refetchEvents https://fullcalendar.io/docs/event_data/refetchEvents/

jQuery('#calendrier').fullCalendar('refetchEvents')

DSiconnelli DSiconnelli · Accepted Answer · 2017-02-10T14:00:15

This did the trick at the end of the OnQuerySucceed function

jQuery('#calendrier').fullCalendar('removeEventSources', eventSourceArray)
jQuery('#calendrier').fullCalendar('addEventSource', eventSourceArray)

Events and AsyncQuery from SharePoint 2013 list

1 Answers