Map JSON return to be FullCalendar jQuery library useable?

Question

The FullCalendar jQuery library (http://arshaw.com/fullcalendar/) meets my needs to a t. It seems to have just what I need. However I can't figure out how to configure it to use this existing JSON Service Return:

{
    "SystemResponse": null,
    "Events": 
    {        
        "systemMessageField": "",
        "otherMessageField": "",
        "eventsField": 
        [
            {
                "additionalTextField": "",
                "eventTitle": "eventTitle1",
                "eventCommentsField": "",
                "eventDateTimeField": "/Date(1379953200000-0500)/",
                "eventDateTimeFieldSpecified": true,
                "eventEndDateTimeField": "/Date(1379954400000-0500)/",
                "eventSourceIDField": "2",
                "eventSourceNumberField": "",
                "eventTimeZoneField": "CDT",
                "eventTypeField": "9109"
            },
            {
                "additionalTextField": "Add Text",
                "eventTitle": "eventTitle1",
                "eventCommentsField": "",
                "eventDateTimeField": "/Date(1379975400000-0500)/",
                "eventDateTimeFieldSpecified": true,
                "eventEndDateTimeField": "/Date(1379979000000-0500)/",
                "eventSourceIDField": "3",
                "eventSourceNumberField": "",
                "eventTimeZoneField": "CDT",
                "eventTypeField": "U123"
            }
        ]
    }
}

I believe the service should return something like the 'Ideal' FullCalendar Return:

[
    "0",
    {
        "allDay": "",
        "title": "Test event",
        "id": "821",
        "end": "2011-06-06 14:00:00",
        "start": "2011-06-06 06:00:00"
    },
    "1",
    {
        "allDay": "",
        "title": "Test event 2",
        "id": "822",
        "end": "2011-06-10 21:00:00",
        "start": "2011-06-10 16:00:00"
    }
]

is there any way to make use of FullCalendar functionality to take my original source json and map like so:

eventDateTimeField->start
eventEndDateTimeField->end
eventTitle->title

Then the FullCalendar control should be able to use my original event service to create events (Oh, and parse those pesky json dates...)

From my experience, i'm dealing with fullcalendar and JSON, FC doenst accept complex JSON but only simple objects {"id":"0","start":"2013-10-31","end":null}...You have to filter your JSON into basic schematic JSON and then send it to fullcalendar...Also note that dates must be in a format that FC accepts like ---> 2013-10-31 00:00:00 <--- — Henrique C.
Yes. I believe you are correct. I'll need to write a modified web service to use full calendar. — Matthew David Jankowski

user2953352 user2953352 · Accepted Answer · 2013-11-04T17:02:40

You have the right idea, mapping the results from your JSON feed to FullCalendar's Event Object properties.

You must ensure that allDay is a boolean, which means that you return either true or false without quotation marks (use your browser to ensure that it says "allDay":true or "allDay":false without any quotation marks around true or false!). Either that or do not return it at all and just let your default apply to all events (not very practical).

It is also useful to standardize on one date format, and I have found the UNIX date / time format to be the most reliable means of communication between FullCalendar and a database back end. However, be aware that you want this in seconds (10 digits, these days). From your example, I can see that it is in milliseconds. You need to divide by 1,000 or treat it like a string and take the leftmost 10 characters. I recommend that you store your data in UTC and do any time zone manipulations outside the database. This manipulation will apply to retrieving and storing dates.

If you do not have the ability to change the coding in your existing JSON feed, you may create an intermediate "listener" to retrieve the data from the current feed, manipulate it (ensure that allDay is actually a boolean and reflects the status of your event, reformat the date / time data and translate the elements' names). Your FullCalendar events would then appear to come from a JSON feed that your intermediary creates by querying the existing JSON feed.

FullCalendar stores all properties regardless of whether or not it uses them so that you can still manipulate the Event Objects based upon the enhanced data available from your feed, despite only needing a handful of properties for FullCalendar's proper operation.

Map JSON return to be FullCalendar jQuery library useable?

1 Answers