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!
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.
function externalevents() {
$('#external-events .fc-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
});
});
}
来源：https://stackoverflow.com/questions/20504207/dynamically-created-external-events-not-draggable