CODEWITHSUNDEEP
javascriptjqueryfullcalendar
saz
saz

Reputation: 291

Populate FullCalendar events as an array - populate from another array

I am very new to JS. My call to the web service returns an array like this:

data {...}
    [0]: {...}
    [1]: {...}
    [2]: {...}
    [3]: {...}
    length: 4 

    data[0] {...}
    __type: "acme.acmeSystem.EventManagement.Event"
    Amenity: {...}
    DateFrom: "/Date(1326952800000)/"
    DateTo: "/Date(1326952800000)/"
    Description: "Friends coming over for a party."
    Food: false
    Id: 3
    IsPrivate: true
    Notes: ""
    NumberOfPeople: "Less than 10"
    Status: {...}
    TimeFrom: "8:30 AM"
    TimeTo: "11:30 AM"
    User: {...}

How can I plug this in to the FullCalendar?

I am trying something like this:

GetEvents([], false,
    {
        successCallback: function (data) {
            if ((data) && (data != null) && (data.length > 0)) {

                buildingEvents = data;                  

                $('#calendar').fullCalendar({
                    theme: true,
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay'
                    },
                    editable: false,
                    events: buildingEvents
                });

            }

            data = null;
        }
    });

I need to create another array of the FullCalendar events from the building events array:

Something like: 

$('#calendar').fullCalendar({
    events: [
        {
            title  : 'event1',
            start  : '2010-01-01'
        },
        {
            title  : 'event2',
            start  : '2010-01-05',
            end    : '2010-01-07'
        },
        {
            title  : 'event3',
            start  : '2010-01-09 12:30:00',
            allDay : false // will make the time show
        }
    ]
});

Thanks.

Upvotes: 4

Views: 6166

Answers (1)

Didier Ghys
Didier Ghys

Reputation: 30666

Well I guess you could use the jquery function $.map().

jQuery.map( array, callback(elementOfArray, indexInArray) ) Returns: Array
Description: Translate all items in an array or object to new array of items.

Basically you will map you data received from your sever into an array of EventData objects understandable by fullCalendar:

var buildingEvents = $.map(data, function(item) {
    return {
        id: item.Id,
        title: item.Description,
        start: ... // "bind" all properties as needed
    };
});

Upvotes: 3

Related Questions