Dynamically created external events not draggable

Question

I'm researching now for over a week and yet I can't drag my JSON value to external draggable divs to a Fullcalendar from Arshaw.

Thanks to some help I have my json data loaded to the external divs. All looks correct, however after appending dynamically created divs to the div with 'external-events' class my events are not draggable anymore.

If I add .draggable() to my newly created divs to the divs with '.external-event' class it becomes draggable but I can't drop them correctly to my calendar. A not draggable new div with the title value will appear under a new blank draggable div. It is so annoying.

in my index.html:

<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();
        }

    }
});

});

</script>
<style>

    body {
    margin-top: 40px;
    text-align: center;
    font-size: 14px;
    font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
    }

    #wrap {
    width: 1100px;
    margin: 0 auto;
    }

    #external-events {
    float: left;
    width: 150px;
    padding: 0 10px;
    border: 1px solid #ccc;
    background: #eee;
    text-align: left;
    }

    #external-events h4 {
    font-size: 16px;
    margin-top: 0;
    padding-top: 1em;
    }

.external-event { /* try to mimick the look of a real event */
    margin: 10px 0;
    padding: 2px 4px;
    background: #3366CC;
    color: #fff;
    font-size: .85em;
    cursor: pointer;
    }

    #external-events p {
    margin: 1.5em 0;
    font-size: 11px;
    color: #666;
    }

    #external-events p input {
    margin: 0;
    vertical-align: middle;
    }

    #calendar {
    float: right;
    width: 900px;
    }

</style>
</head>
<body>

<div id='wrap'>
<div id='external-events' style="display: none;">
<img alt="web applications logo" src="tax4t.png">
<h4>Workes list</h4>
<div class='external-event'>John the first</div>
<div class='external-event'>Mark the second</div>
<div class='external-event'><button id="mecbtn" type="button">Mecanic Test</button>             </div>

I use a myscript.js to get JSON values and create divs.

window.onload = function () { 
var html='';
$.getJSON('trax4t/json/example.json', function(info){
for (var numero = 0;numero < info.length;numero++) {
        var eventObjectFromDB = info[numero];
        var eventToExternalEvents = {"title":eventObjectFromDB.title,
                                "id":eventObjectFromDB.id,
                                "start":eventObjectFromDB.start,
                                        "end":eventObjectFromDB.end,
                                        "allDay":eventObjectFromDB.allDay};
$('#external-events').append("<div class='external-event'>"+ eventToExternalEvents.title +"</div>");
$('.external-event').addClass('fc-event-draggable');
};
});
};

You can see this is a typical Fullcalendar with external events list.

I'm very tired by now. I hope things are not to messy. My code has more /.../ parts then actual code. I try really hard. Can someone tell me what am I missing here?

I hope this is enough information, but I add more if necessary. Thank you so much in advance!

Hello Sir again :P, have you noticed this? link...try for each event object adding the editable propertie like so "editable":true and you have to use the Jquery plugin dragable and jquery ui core, to do it. — Henrique C.
I've added to the ´var eventToExternalEvents´ "editable":true and then made ´$('external-event').draggable();´. However no difference :( Maybe I'm adding it to the wrong place. — Laci

Laci Laci · Accepted Answer · 2013-12-21T12:37:11

This is the first time I answer my own question, but it can be useful to others who are new to fullcalendar and it may still need corrections as for sure there are better solutions to this.

In an external myscript.js I repeated the following part of the index.html:

window.onload = function () { 
$.getJSON('json/example.json', function(info){
   for (var numero = 0;numero < info.length;numero++) {
            var eventObjectFromDB = info[numero];
            var eventToExternalEvents =                      
                                           {"title":eventObjectFromDB.title,
                                "id":eventObjectFromDB.id,
                                "start":eventObjectFromDB.start,
                                        "end":eventObjectFromDB.end,
                                        "allDay":eventObjectFromDB.allDay,
                    "editable":true};

   $('#external-events').append("<div class='external-event' id='mec"+numero+"'>"+ eventToExternalEvents.title +"</div>");
            var eventObject2 = {
                title: $.trim(eventToExternalEvents.title) // use the element's text as the event title
            };
            $('#mec'+numero).data('eventObject', eventObject2);
            alert('#mec'+numero+'');
            $('.external-event').draggable({
                zIndex: 999,
                revert: true,      // will cause the event to go back to its
                revertDuration: 0  });
            $('#calendar').fullCalendar( 'refetchEvents' );
        }
    });

This now works. Fullcalendar will return the right title for each event. I use individual id's for each event from the for loop but probably I will change that for the id loaded from the JSON file. This is at your discretion.

Dynamically created external events not draggable

2 Answers