Issue with Loading Array

[mikeharvey]

I am having an issue loading an array into the calendar which I am building with an SPServices call to a Sharepoint server. Any idea what I am missing here? Everything but the actual event data loads and with no errors in the console. I just don't see events in the calendar.

My options call looks like this:

var eventData =  getCalendarData;
var options = {
        events_source: [eventData],
        view: 'week',
        tmpl_path: '/SiteAssets/tmpls/',
        tmpl_cache: false,
        onAfterEventsLoad: function(events) {
            if(!events) {
                return;
            }
            var list = $('#eventlist');
            list.html('');

            $.each(events, function(key, val) {
                $(document.createElement('li'))
                    .html('<a href="' + val.url + '">' + val.title + '</a>')
                    .appendTo(list);
            });
        },
        onAfterViewLoad: function(view) {
            $('.page-header h3').text(this.getTitle());
            $('.btn-group button').removeClass('active');
            $('button[data-calendar-view="' + view + '"]').addClass('active');
        },
        classes: {
            months: {
                general: 'label'
            }
        }
    };

I am dumping the array to the browser so I am sure the array is being populated prior to the calendar load. An example element of the array looks like this:

{id: "30",title: "123 Maple Ave, Mayberry&&Not Assigned",url: "http://mysite.com/Calendar/DispForm.aspx?ID=30",class: "event-warning",start: "1412596800",end: "1412611200"},

Also, would the mssing event entries be causing the page to reload from the server after navigation?

Thanks!

[Serhioromano]

start and end time have to be in milliseconds. Add 000 to it.

Reload after navigation may be because you buttons behave like subtit buttons. Add type="button".

[mikeharvey]

Thanks have added the milliseconds to the start and end times as described above. Now seeing the following error:

TypeError: self.options.events.sort is not a function

Again, Im using the method of passing an array to the event_source option. Im guessing the eventData is not an array even though I am coverting the json string with

var eventData =  eval('(' + eventsRaw + ')'); 

Has anyone used this method or something similar successfully? Any examples would be awesome.

Also I am using the buttons nav buttons and functions in the app.js that are provided in the online demo:

<div class="pull-right form-inline">
            <div class="btn-group">
                <button class="btn btn-primary" data-calendar-nav="prev"><< Prev</button>
                <button class="btn btn-default" data-calendar-nav="today">Today</button>
                <button class="btn btn-primary" data-calendar-nav="next">Next >></button>
            </div>
            <div class="btn-group">
                <button class="btn btn-warning" data-calendar-view="year">Year</button>
                <button class="btn btn-warning active" data-calendar-view="month">Month</button>
                <button class="btn btn-warning" data-calendar-view="week">Week</button>
                <button class="btn btn-warning" data-calendar-view="day">Day</button>
            </div>
        </div>

And the related option calls are (exactly from the demo page):

    var options = {
        events_source: eventData,
        view: 'week',
        tmpl_path: '/NYC/SiteAssets/tmpls/',
        tmpl_cache: true,
        onAfterEventsLoad: function(events) {
            if(!events) {
                return;
            }
            var list = $('#eventlist');
            list.html('');

            $.each(events, function(key, val) {
                $(document.createElement('li'))
                    .html('<a href="' + val.url + '">' + val.title + '</a>')
                    .appendTo(list);
            });
        },
        onAfterViewLoad: function(view) {
            $('.page-header h3').text(this.getTitle());
            $('.btn-group button').removeClass('active');
            $('button[data-calendar-view="' + view + '"]').addClass('active');
        },
        classes: {
            months: {
                general: 'label'
            }
        }
    };

[Serhioromano]

If your navigation buttons are inside <form> element you have to add type="button"

<button type="button" class="btn btn-warning" data-calendar-view="year">Year</button>

Where do you get eventsRaw from? Ajax request or during page building? In bose cases you may automaticaly convert json string to array. Tell me how you get it and I'll suggest what to do.

[mikeharvey]

The buttons are not in a form call but exactly as posted (just like your demo).

The eventsRaw is the resulting string from an ajax request to a Sharepoint Server via SPServices which returns a JSON formatted string containing all events. I tried to just enclose it in brackets like

event_source:  [ eventsRaw ];

as well as perform an eval on it (as in prior post) prior to the options setting to covert it to an array all to no avail. I still get undefined when rendering the events.

Thanks much for your help.

[Serhioromano]

Please, show me code that gets that data.

I mean if you use $.ajax then you can set dataType: 'json'

[mikeharvey]

I call the function with the follwing and am attemting to parse the JSON like this:

    var eventsRaw = getCalendarData;
    var eventData = [eventsRaw];

I tried JSON.parse(eventsRaw) but get:

Unexpected token u 

which means the JSON string is undefined. I am dumping it to the browser so I know there is data in the string.

The function and related functions to get the data is:

    function getCalendarData() {
        var CamlQuery = "<Query><OrderBy><FieldRef Name='ID' /></OrderBy></Query>";
        var allJSONData = '';
        var startDate = '';
        var endDate = '';        
        $().SPServices({
            operation: "GetListItems",
            async: false,
            listName: "Design Consultation Calendar",
            CAMLQuery: CamlQuery,
            completefunc: function (xData, Status) {
                 var len = $(xData.responseXML).SPFilterNode("z:row").length;
                 $(xData.responseXML).SPFilterNode("z:row").each(function(index, element) {
                 var startDate = moment($(this).attr("ows_ScheduledStartTime")).unix() + '000';
                 var endDate   = moment($(this).attr("ows_ScheduledEndTime")).unix() + '000';
                 var thisTitle = makeTitle($(this).attr("ows_Address"),$(this).attr("ows_DesignTeam"));
                 var thisClass = mapClass($(this).attr("ows_Status"));              
                 allJSONData += '{';
                 allJSONData += '"id": ' + $(this).attr("ows_ID") + ',';
                 allJSONData += '"title": "' + thisTitle + '",';
                 allJSONData += '"url": "http://nydev:3046/NYC/Lists/DesignConsultationCalendar/DispForm.aspx?ID=' + $(this).attr("ows_ID") + '",';
                 allJSONData += '"class": "' + thisClass + '",';
                 allJSONData += '"start": ' + startDate  + ',';
                 if (index == len - 1) {
                     allJSONData += '"end": ' + endDate + '}';
                 }
                 else {
                     allJSONData += '"end": ' + endDate + '},';              
                 }
                 });
            }

        });
        return allJSONData;
    };

    function makeTitle(thisAddress,thisTeam) {
         if ((typeof(thisAddress)  === "undefined") || (thisAddress == ",")) { thisAddress= 'No Address';}
         if (typeof(thisTeam)  === "undefined") { thisTeam = 'Not Assigned';}
         var title = thisAddress + '&&' + thisTeam;
         return title;
    };

    function mapClass(thisClass) {
          var newClass = '';
          if (thisClass == "Assigned") { newClass = "event-info"; }
          else if (thisClass == "Received") { newClass = "event-warning"; }
          else if (thisClass == "Rescheduled") { newClass = "event-important";}
          else if (thisClass == "Completed") { newClass = "event-success";}
          else { newClass = "event-special";}
          return newClass;
    };

And the eventsRaw is outputting this:

{"id": "30","title": "123 Maple Ave, Mayberry&&Not Assigned","url": "http://myurl.com/DispForm.aspx?ID=30","class": "event-warning","start": "1412596800000","end": "1412611200000"},{"id": "31","title": "212 Apple Ave, Mayberry&&Johnny Doe/Mary Smith","url": "http://myurl.com/DispForm.aspx?ID=31","class": "event-success","start": "1381060800000","end": "1381075200000"},{"id": "32","title": "163 BEACH St, Mayberry&&Jeff Lickster/Diane Boomer","url": "http://myurl.com/DispForm.aspx?ID=32","class": "event-warning","start": "1390575600000","end": "1390582800000"},{"id": "33","title": "95-20 158 AVENUE, Queens&&Jeff Lickster/Diane Boomer","url": "http://myurl.com/DispForm.aspx?ID=33","class": "event-info","start": "1390572000000","end": "1390581000000"},
...
{"id": "80","title": "No Address&&Not Assigned","url": "http:/myurl.com/DispForm.aspx?ID=80","class": "event-warning","start": "1391200200000","end": "1391214600000"}

[Serhioromano]

That should be

[
    {"id": "30","title": "123 Maple Ave, Mayberry&&Not Assigned","url": "http://myurl.com/DispForm.aspx?ID=30","class": "event-warning","start": "1412596800000","end": "1412611200000"},{"id": "31","title": "212 Apple Ave, Mayberry&&Johnny Doe/Mary Smith","url": "http://myurl.com/DispForm.aspx?ID=31","class": "event-success","start": "1381060800000","end": "1381075200000"},{"id": "32","title": "163 BEACH St, Mayberry&&Jeff Lickster/Diane Boomer","url": "http://myurl.com/DispForm.aspx?ID=32","class": "event-warning","start": "1390575600000","end": "1390582800000"},{"id": "33","title": "95-20 158 AVENUE, Queens&&Jeff Lickster/Diane Boomer","url": "http://myurl.com/DispForm.aspx?ID=33","class": "event-info","start": "1390572000000","end": "1390581000000"},
    {"id": "80","title": "No Address&&Not Assigned","url": "http:/myurl.com/DispForm.aspx?ID=80","class": "event-warning","start": "1391200200000","end": "1391214600000"}
]

[] stands for array.

[mikeharvey]

Then shouldn't this work? As in the Readme:

    var eventData = getCalendarData;
    $('#dump').html(eventData);

    var options = {
        events_source: [ eventData ],

Thats the first thing I tried.

[Serhioromano]

I do not think so. Because evenData is an object. You should add [] before convert json string to array. And instead of eval you may try jQuery.parseJSON(jsonString); which I consider as more safe approach.

After you create array output it to console.log(eventData) and see if it is really an array.

[brechmos]

@mikeharvey: Did you get this worked out? I have exactly the same error.

[gpcaretti]

I solved the point by using underscore.js for changing a line of code of your library:

// original code (see calendar.js) line # 950
self.options.events.sort(function (a, b) {
	var delta;
	delta = a.start - b.start;
	if (delta == 0) {
		delta = a.end - b.end;
	}
	return delta;
});

// my code
self.options.events.result = _.sortBy(self.options.events.result, 'start');