eventDrop and drop fullCalendar
Question
Is it possible to use both eventDrop and drop in fullCalendar . I'm using fullCalendar plugin. I want to update some records when an event dropped onto a calendar and whenever a events changed from one day to another day. I've tried like below:
$('#calendar').fullCalendar({
header: {
left: 'prev,next, today',
center: 'title',
right: 'prevYear,nextYear '
},
editable: true,
viewRender: function(view, element) {
$('.fc-center')[0].children[0].innerText = view.title.replace(new RegExp("undefined", 'g'), "");
},
eventDrop: function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) {
alert(event.start.format());
}
drop: function(date, allDay, event) {
alert(date.format());
}
});eventDrop and Drop
2 answers
solution1
3 ACCPTED 2017-05-24 08:47:14
This is based on the example here: https://fullcalendar.io/js/fullcalendar-3.4.0/demos/external-dragging.html
but with the addition of the eventDrop callback, and the alerts to show that the callback has happened.
Try dragging an event onto the calendar - you'll get an alert saying eg "drop: 2017-05-24" and the date. Now drag that event from one time to another - you'll get an alert saying eg "eventDrop: 2017-05-01".
Note that both "editable" and "droppable" need to be set as "true" for all of this to work. You may also want to consider handling the "eventResize" callback if you are going to allow events to be made larger and smaller too, or the start time to be changed (note that these capabilities are on by default, unlike dragging the dropping, so if you don't want them you have to to explicitly switch them off).
$(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 drop: function(date, jsEvent, ui, resourceId) { alert("drop: " + date.format()); }, eventDrop: function(event, delta, revertFunc, jsEvent, ui, view) { alert("eventDrop: " + event.start.format()); } }); });
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; }
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.0/moment.min.js'></script> <!--[if lt IE 9]> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'></script> <![endif]--> <!--[if gte IE 9]><!--> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <!--<![endif]--> <link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.min.css" rel="stylesheet" media="all" /> <link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet" media="all" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/fullcalendar.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.3.1/gcal.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script> </head> <body> <div id='wrap'> <div id='external-events'> <h4>Draggable Events</h4> <div class='fc-event'>My Event 1</div> <div class='fc-event'>My Event 2</div> <div class='fc-event'>My Event 3</div> <div class='fc-event'>My Event 4</div> <div class='fc-event'>My Event 5</div> </div> <div id='calendar'></div> <div style='clear:both'></div> </div> </body>
solution2
0 2017-05-24 06:57:54
You have to set droppable to true .
$('#calendar').fullCalendar({
droppable: true,
drop: function(date) {
alert("Dropped on " + date.format());
}
});
Read the documentation .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.