是否可以同时使用eventDrop和放置在fullCalendar中。我正在使用fullCalendar插件。我想在事件放到日历上以及事件从一天更改为另一天时更新一些记录。我已经尝试过如下所示：
$('#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和Drop 最佳答案
这基于此处的示例：https://fullcalendar.io/js/fullcalendar-3.4.0/demos/external-dragging.html
但添加了eventDrop回调，以及显示回调已发生的警报。
尝试将事件拖到日历上-您会收到一条警告，例如“下降：2017-05-24”和日期。现在，将该事件从一个时间拖到另一个时间-您会收到一条警告，例如“ eventDrop：2017-05-01”。
请注意，所有这些都必须将“可编辑”和“可放置”都设置为“ true”。如果您也要使事件变大或变小或更改开始时间，则可能还需要考虑处理“ eventResize”回调（请注意，这些功能默认情况下处于启用状态，与拖放操作不同，因此如果您不希望使用它们，则必须明确将其关闭）。
$(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>