I am trying to implement a drag and drop using FullCalendar.js, the idea is basically to have a menu on the left with a list of events that are draggable and you can drop on the calendar (which would then execute a function that will add these to GoogleCalendar).
My problem is that the 'drop' is not working for some reason, I can drag the text on the top, but the "drop" event is not being fired on FullCalendar:
HTML:
<div class="wrapper wrapper-content" id="calendar-wrap">
<div class="row animated fadeInDown">
<div class="col-lg-3">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Draggable Events</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<div id='external-events'>
<p>Drag a event and drop into calendar.</p>
<div id="evt1" class='external-event navy-bg'>Call Client.</div>
<div id="evt2" class='external-event navy-bg'>Confirm Client Happy with Quote.</div>
<div id="evt3" class='external-event navy-bg'>Send Quote.</div>
<div id="evt4" class='external-event navy-bg'>Something Else.</div>
<div id="evt5" class='external-event navy-bg'>One more for luck.</div>
<p class="m-t">
<input type='checkbox' id='removeEventAfterDrop' checked /> <label for='removeEventAfterDrop'>remove after drop</label>
</p>
</div>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Calendar Monthly View </h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<div id="myFullCalendar"></div>
</div>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function() {
/* initialize the external events
-----------------------------------------------------------------*/
$('div.external-event').each(function() {
console.log("external event");
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 1000,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
/* initialize the calendar
-----------------------------------------------------------------*/
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#myFullCalendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function(){
console.log("dropped");
},
events: [
{
title: 'All Day Event',
start: new Date(y, m, 1)
},
{
title: 'Long Event',
start: new Date(y, m, d-5),
end: new Date(y, m, d-2)
},
{
id: 999,
title: 'Repeating Event',
start: new Date(y, m, d-3, 16, 0),
allDay: false
},
]
});
});
Js Fiddle: https://jsfiddle.net/filipecss/x74so0tz/7/
What could be causing this issue?
Thanks in advance,
