2

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

  • Please post relevant code you have tried so far., – Amal Hashim May 15 '15 at 12:47
  • @Amal ,I have posted the code. – gunu May 15 '15 at 14:57
  • You need to pass a CAML query to getItems – Amal Hashim May 15 '15 at 15:01
  • I did it but still the problem is not solved – gunu May 15 '15 at 17:48
  • 1
    The CAML listed is malformed and there is no order by, so even if it was correct, there wouldn't be any guarantee that your newly created event would be returned. – Eric Alexander May 15 '15 at 18:04
2

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.