I am planning on using the EXCELLENT FullCalendar JQUERY plugin https://fullcalendar.io/ as a core part of an operational system. At the moment I am prototyping to check whether the plug in will do the job. I am very nearly finished and have found just one issue that I can find no solution for anywhere on the internet or in the documentation.
Key to understanding my problem is that I need to use the external-events configuration (code as below) of FullCalendar. So...when I drag an element already on the calendar between dates it triggers the eventdDrop event and my alert message returns the event data of the event object- all exactly as expected. So I know I can easily replace the alert with an AJAX Post to register the new (moved) event data in the database.
However my problem.... When I now drag one of the external-events (eg GAS Cert due) onto the calendar it does not trigger the eventdrop event when it first gets dropped on the calendar. So I am struggling to figure out how I can save event data (from a dragged external-event) into the database - when the event is first dropped on the calendar by dragging it from the external-event list. (For info:-if i subsequently move the new event created to a new calendar date, eventDrop is triggered. However oftentimes the user will simply drag external-events onto the calendar and leave them there for days or weeks - during that period the event data on the calendar needs saving to the database for subsequent page re-visits.
I have been searching for ages with no luck. Thanks if anyone has a neat solution.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='../fullcalendar.min.css' rel='stylesheet' />
<link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
<script src='../lib/jquery-ui.min.js'></script>
<script src='../fullcalendar.min.js'></script>
<script>
$(document).ready(function() {
/* initialize the external events
-----------------------------------------------------------------*/
$('#external-events .fc-event').each(function() {
// 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: 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: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
droppable: true, // this allows things to be dropped onto the calendar
/*-------Problem------Event is triggered when object is moved on calendar-but not when event is dragged and dropped from external events list-help?----------------------------------*/
eventDrop: function(event, delta, revertFunc) {
//inner column movement drop so get start and call the ajax function......
console.log(event.start.format());
console.log(event.id);
var defaultDuration = moment.duration($('#calendar').fullCalendar('option', 'defaultTimedEventDuration')); // get the default and convert it to proper type
var end = event.end || event.start.clone().add(defaultDuration); // If there is no end, compute it
console.log('end is ' + end.format());
alert(event.title + " was dropped on " + event.start.format()); //REPLACE WITH AJAX TO SAVE EVENT DATA
},
drop: function() {
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
},
events: [
{
title: 'All Day Event',
start: '2017-02-01'
},
{
title: 'Long Event',
start: '2017-02-07',
end: '2017-02-10'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-02-09T16:00:00'
},
{
id: 999,
title: 'Repeating Event',
start: '2017-02-16T16:00:00'
},
{
title: 'Conference',
start: '2017-02-11',
end: '2017-02-13'
},
{
title: 'Meeting',
start: '2017-02-12T10:30:00',
end: '2017-02-12T12:30:00'
},
{
title: 'Lunch',
start: '2017-02-12T12:00:00'
},
{
title: 'Meeting',
start: '2017-02-12T14:30:00'
},
{
title: 'Happy Hour',
start: '2017-02-12T17:30:00'
},
{
title: 'Dinner',
start: '2017-02-12T20:00:00'
},
{
title: 'Birthday Party',
start: '2017-02-13T07:00:00'
},
{
title: 'Click for Google',
url: 'http://google.com/',
start: '2017-02-28'
}
]
});
});
</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-events .fc-event {
margin: 10px 0;
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'>
<h4>Draggable Events</h4>
<div class='fc-event' style="color:red">Gas Cert Due Today</div>
<div class='fc-event'>Electricity Cert is Due</div>
<div class='fc-event'></div>
<div class='fc-event'>My Event 4</div>
<div class='fc-event'>My Event 5</div>
<p>
<input type='checkbox' id='drop-remove' />
<label for='drop-remove'>remove after drop</label>
</p>
</div>
<div id='calendar'></div>
<div style='clear:both'></div>
</div>
</body>
</html>
