How to build external events list from the loaded JSON file?

Question

I have no problem loading data from JSON file to my Fullcalendar, however I want all my data to appear only on the external list of draggable / droppable events and then the user would decide where to drag events (example)

I did achieve loading data to the external list divs. It is displayed correctly, but when I drag the event to the calendar the title disappears. How can I avoid losing data?

Here is the code:

<script>
$(document).ready(function() {


    /* initialize the external events
    -----------------------------------------------------------------*/

    $('#external-events div.external-event').each(function() {

        // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
        // it doesn't need to have a start or end
        var eventObject = {
            title: $.trim($(this).text()) // use the element's text as the event title
        };

        // store the Event Object in the DOM element so we can get to it later
        $(this).data('eventObject', eventObject);

        // make the event draggable using jQuery UI
        $(this).draggable({
            zIndex: 999,
            revert: true,      // will cause the event to go back to its
            revertDuration: 0  //  original position after the drag
        });

    });


    /* initialize the calendar
    -----------------------------------------------------------------*/

    $('#calendar').fullCalendar({
        header: {
            left: 'prevYear,nextYear prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        events: 'json/example.json',
        eventRender: function (event, element) {element.find('.fc-event-title').html(event.id);},
        eventClick: function(event) {
        if (event.url) {
            window.open(event.url);
            return false;
        }
        },
        editable: true,
        droppable: true, // this allows things to be dropped onto the calendar !!!
        drop: function(date, allDay) { // this function is called when something is dropped

            // retrieve the dropped element's stored Event Object
            var originalEventObject = $(this).data('eventObject');

            // we need to copy it, so that multiple events don't have a reference to the same object
            var copiedEventObject = $.extend({}, originalEventObject);

            // assign it the date that was reported
            copiedEventObject.start = date;
            copiedEventObject.allDay = allDay;

            // render the event on the calendar
            // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

            // is the "remove after drop" checkbox checked?
            if ($('#drop-remove').is(':checked')) {
                // if so, remove the element from the "Draggable Events" list
                $(this).remove();
            }

        }
    });

});

divs in body:

<div id='wrap'>
<div id='external-events' style="display: none;">
<h4>Draggable Events</h4>
<div class='external-event' id="mec1"></div>
<div class='external-event' id="mec2"></div>
<div class='external-event'>My Event 3</div>
<div class='external-event'>My Event 4</div>
</div>
<div id='calendar'></div>
<div style='clear:both'></div>
 </div>

You can see I've also tried loading JSON data with external JavaScript to div id "mec1" and div id "mec2". This was successful yet same situation. Title disappears after drag drop.

If I drag these to div id='calendar' the title is not displayed anymore.

My JSON file contains only this:

[
{
    "title" : "Blue Monday",
    "allDay" : false 
},
{
    "title" : "John de John",
    "allDay" : false 
},
{
    "title" : "Pumukli Pista",
    "allDay" : false 
} 
]

I hope I provided enough information. Thank you in advance for any help on this.

I'm very new to fullcalendar and strong basic with jQuery, js. I've tried to solve the problem from here

@HenriqueC. I did paste my JSON now. It is basic but working. I will extend it with important data when I solve the above question. I have no idea what am I not understanding. — Laci
Try and add the "id":"0" or "id":"your id for each event". And fullcalendar needs the start and end also. — Henrique C.
Thanks for being in touch and helping out, though isn't it possible that I should somehow pass json data to var eventObject = { title: $.trim($(this).text())}; ? — Laci
If I would have to reformulate my question I would ask 'HOW to build external events list from the loaded JSON file?'. I hope this makes me more direct. — Laci

Henrique C. Henrique C. · Accepted Answer · 2013-12-08T18:17:26

Well indeed you can, if your doing this for recent browsers you can use JSON libs from browsers. Meaning you can access from a JSON object has you can see here after parsing the JSON object comming from your server.

So you can do something like this:

var eventObjectFromDB = JSON.Parse(yourobject);
var eventToExternalEvents = {"title":eventObjectFromDB.title,
                             "id":eventObjectFromDB.id,
                             "start":eventObjectFromDB.start,
                             "end":eventObjectFromDB.end,
                             "allDay":eventObjectFromDB.allDay};

After this use the second variable and add it to your array/list of external events...

Is this what your asking?

How to build external events list from the loaded JSON file?

1 Answers