Skip to main content
Add Code
Source Link

I updated the code to strip out most of the fullcalendar stuff so you can use this code for just about any calendar that accepts a JSON array.

You just need to modify the NewEvents.push structure to match what the library wants and then modify CalendarSetup to call the new library.

<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({
            events: NewEvents,
        });
    }
</script>

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

I updated the code to strip out most of the fullcalendar stuff so you can use this code for just about any calendar that accepts a JSON array.

You just need to modify the NewEvents.push structure to match what the library wants and then modify CalendarSetup to call the new library.

<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({
            events: NewEvents,
        });
    }
</script>

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

I provided code to use jQuery FullCalendar for a previous issue:

Fetching items from sharepoint list and attaching in Fullcalendar with JSOM

Let me know if you need help with that code.