Loop true list using csom

Question

How do i loop true, items in calender list in SharePoint, right now my code only displays the first value from the list and not the second,

Can someone help me?

function onQuerySucceeded() {

var startCon = listItemCustom + "T" + "08" + ":00" + "Z";
var endCon = listItemtoDate + "T" + "17" + ":00" + "Z";
var dtstartCon = new Date(startCon);
var dtEndCon = new Date(endCon);
var convertUtctoFromtime = new Date(dtstartCon.getTime() + dtstartCon.getTimezoneOffset() * 60 * 1000);
var start = new Date(convertUtctoFromtime);
var convertUtcToTime = new Date(dtEndCon.getTime() + dtEndCon.getTimezoneOffset() * 60 * 1000);
var end = new Date(convertUtcToTime);

var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
    var oListItem = listItemEnumerator.get_current();
    var listEventDate = oListItem.get_item('EventDate');
    var listEventdt = new Date(listEventDate);
    var listEndDate = oListItem.get_item('EndDate');
    var listEventEnddt = new Date(listEndDate);

    var string = [[listEventdt, listEventEnddt]];

    while (end.getTime() >= start.getTime()) {

        var firstnewDate = (start.setTime(start.getTime()));
        var firstNewDt = new Date(firstnewDate);
        var newDate = start.setTime(start.getTime() + 30 * 60 * 1000);
        start = new Date(newDate);

        for (var i = 0; i < string.length; i++) {


            var date = string[i][0];
            var date2 = string[i][1];

         if (firstNewDt.getTime() != date && start.getTime() != date2) {
             alert(firstNewDt + " " + start);
         } else {

             alert("Busy");
         }

    }

    }

}

}

Why does it work like this when i display all the values on current date and time,

 var array = new Array(oListItem.get_item('EventDate').toLocaleString() + "   " + oListItem.get_item('EndDate').toLocaleString());

                for (var i = 0; i < array.length; i++) {

                    var date = array[i];

                    alert(date);

But if i want to split up EventDate and Endate and see if they are equals to Start and End Time between 8-17 ? How then?

UPDATE

Right now it only displays the first item in the list and not other why?

function onQuerySucceeded() {

var startCon = listItemCustom + "T" + "08" + ":00" + "Z";
var endCon = listItemtoDate + "T" + "17" + ":00" + "Z";
var dtstartCon = new Date(startCon);
var dtEndCon = new Date(endCon);
var convertUtctoFromtime = new Date(dtstartCon.getTime() + dtstartCon.getTimezoneOffset() * 60 * 1000);
var start = new Date(convertUtctoFromtime);
var convertUtcToTime = new Date(dtEndCon.getTime() + dtEndCon.getTimezoneOffset() * 60 * 1000);
var end = new Date(convertUtcToTime);

var listItemEnumerator = collListItem.getEnumerator();
while (listItemEnumerator.moveNext()) {
    var oListItem = listItemEnumerator.get_current();
    var listEventDate = oListItem.get_item('EventDate');
    var listEndDate = oListItem.get_item('EndDate');

    var string = [[listEventDate, listEndDate]];

    while (end.getTime() >= start.getTime()) {

        var firstnewDate = (start.setTime(start.getTime()));
        var firstNewDt = new Date(firstnewDate);
        var newDate = start.setTime(start.getTime() + 30 * 60 * 1000);
        start = new Date(newDate);


        for (var i = 0; i < string.length; i++) {

            var date = string[i][0];
            var dt = new Date(date);

            var date2 = string[i][1];
            var dt2 = new Date(date2);

            if (firstNewDt.getTime() != dt.geTime() && start.getTime() != dt2.getTime()) {
                alert(firstNewDt + " " + start);
            } else {

                alert("Busy");

            }

        }




    }
}

}

Answer 1

As far as I know the JavaScript CSOM does NOT support expanding recurring events (the same is true for REST / OData) as described here.

I suggest you to use the GetListItems method of the Lists web service directly or indirectly via SPServices (see sample and discussion) if you need calendar related functionality on the web UI.

Instead of iterating through all of the items and comparing start and end dates you should query the items with CAML, for example (sample from this page):

var startDate = "2012-05-12T12:00:00Z"; // Our example will show the month of May 2012 

$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "My Calendar",
    CAMLViewFields: "<ViewFields>" +
    "<FieldRef Name='Title' />" +
    "<FieldRef Name='EventDate' />" +
    "<FieldRef Name='EndDate' />" +
    "<FieldRef Name='Location' />" +
    "<FieldRef Name='Description' />" +
    "<FieldRef Name='fRecurrence' />" +
    "<FieldRef Name='RecurrenceData' />" +
    "<FieldRef Name='fAllDayEvent' />" +
    "</ViewFields>",
    CAMLQuery: "<Query>" +
    "<Where>" +
    "<DateRangesOverlap>" +
    "<FieldRef Name='EventDate' />" +
    "<FieldRef Name='EndDate' />" +
    "<FieldRef Name='RecurrenceID' />" +
    "<Value Type='DateTime'>" +
    "<Month />" +
    "</Value>" +
    "</DateRangesOverlap>" +
    "</Where>" +
    "<OrderBy>" +
    "<FieldRef Name='EventDate' />" +
    "</OrderBy>" +
    "</Query>",
    CAMLQueryOptions: "<QueryOptions>" +
    "<CalendarDate>" + startDate + "</CalendarDate>" +
    "<RecurrencePatternXMLVersion>v3</RecurrencePatternXMLVersion>" +
    "<ExpandRecurrence>TRUE</ExpandRecurrence>" +
    "</QueryOptions>",
    completefunc: function (xData, Status) {
        $(xData.responseXML).SPFilterNode("z:row").each(function () {
            var $node = $(this),
            fADE = $node.attr("ows_fAllDayEvent") || 0,
            thisADE = (fADE == 0),
            thisID = $node.attr("ows_ID"),
            sepID = thisID.indexOf(';#'),
            thisTitle = $node.attr("ows_Title"),
            thisRecurrence = $node.attr("ows_fRecurrence"),
            thisDesc = $node.attr("ows_Description");
            if (sepID != -1) thisID = thisID.substring(0, sepID);
            var thisUrl = "DispForm.aspx?ID=" + thisID,
            thisClass = thisTitle.replace(" ", "").substr(0, 10).replace(",", "").replace(" ", "") + thisID,
            thisRD = $node.attr("ows_RecurrenceData");

            // if working with FullCalendar or building an events object for another purpose... 
            events.push({
                title: thisTitle,
                start: $node.attr("ows_EventDate"),
                end: $node.attr("ows_EndDate"),
                allDay: thisADE,
                url: thisUrl,
                description: $(thisDesc).text()
            });
        });
    }
})