1

So I'm trying to display the next three events on the calendar, but the calendar is sorted by date created, not start date. So I've pulled the list into an array, sorted it there, and displayed the information from there, but for some reason it's not working. Could someone check the code?

$(document).ready(function () {

var limit = 3;
var arr = [];

//Creates the Upcoming Events list from the SP List
$().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Calendar",
    completefunc: function (xData, Status) {
        $(xData.responseXML).SPFilterNode("z:row").each(function () {
            var dateTempOne = new Date($(this).attr("ows_EventDate"));
            dateTempTwo = dateTempOne.getTime();
            arr.push({
                title: $(this).attr("ows_Title"),
                timeStamp: dateTempTwo,
                dayOf: $(this).attr("ows_Day_x0020_of_x0020_Event")
            });
       });
    }
});


var len = arr.length;

for(var i = 0; i < len; i++) {
    j= i+1;
    if(arr[i].timeStamp > arr[j].timeStamp){
        var temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
}

var now = Date.now();
var k = 0;

for(var i = 0; i < len; i++){
    if(k < limit){
        if(arr[i].timeStamp > now){
            var liHtml = "<li class='econHomeLi'><h2>" + arr[i].title + "</h2><p>" + arr[i].dayOf + "</p></li>";
            $("#events").append(liHtml);
        }
        k++;
    }else{
        return;
    }
}
});

EDIT: THIS IS WHAT I ENDED UP DOING, AND IT WORKED

var limit = 3;

//Creates the Upcoming Events list from the SP List
$().SPServices({
    operation: "GetListItems",
    async: false,
    CAMLQuery: "<Query><OrderBy><FieldRef Name='EventDate' Ascending='True' /></OrderBy></Query>",
    listName: "Calendar",
    completefunc: function (xData, Status) {
        var i = 0;
        $(xData.responseXML).SPFilterNode("z:row").each(function () {
            if (i<limit){
                var date = new Date($(this).attr("ows_EventDate"));
                var milliseconds = date.getTime();
                var now = Date.now();
                var title = $(this).attr("ows_Title");
                var dayOfEvent = $(this).attr("ows_Day_x0020_of_x0020_Event");

                if(milliseconds>now){
                    var liHtml = "<li class='econHomeLi'><h2>" + title + "</h2><p>" + dayOfEvent + "</p></li>";
                    $("#events").append(liHtml);
                    i++
                }
            }else{
                return;
            }
       });
    }
});
1

I would simply do it as such:

var arr = [];
$().SPServices({
    operation: "GetListItems",
    async: false,
    CAMLQuery: "<Query><OrderBy><FieldRef Name='EventDate' Ascending='FALSE' /></OrderBy></Query>",
    QueryOptions: "<QueryOptions><RowLimit>3</RowLimit></QueryOptions>",
    listName: "Calendar",
    completefunc: function (xData, Status) {
        $(xData.responseXML).SPFilterNode("z:row").each(function () {
            var dateTempOne = new Date($(this).attr("ows_EventDate"));
            dateTempTwo = dateTempOne.getTime();
            arr.push({
              title: $(this).attr("ows_Title"),
              timeStamp: dateTempTwo,
              dayOf: $(this).attr("ows_Day_x0020_of_x0020_Event")
            });
       });
    }
});

Pass in a query and an item limit into SPServices and let it work for you. No need for any of the other script.

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.