eventDrop和drop full日历
[英]eventDrop and drop fullCalendar
问题描述
Is it possible to use both eventDrop and drop in fullCalendar . 
是否可以同时使用eventDrop和fullCalendar 。 I'm using fullCalendar plugin. 我正在使用fullCalendar插件。 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
我无法同时使用eventDrop和Drop
2 个解决方案
解决方案1
3 已采纳 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 这基于此处的示例： 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. 但添加了eventDrop回调，以及显示回调已发生的警报。
Try dragging an event onto the calendar - you'll get an alert saying eg "drop: 2017-05-24" and the date. 尝试将事件拖到日历上-您会收到一条警告，例如“ drop：2017-05-24”和日期。 Now drag that event from one time to another - you'll get an alert saying eg "eventDrop: 2017-05-01". 现在，将该事件从一个时间拖到另一个时间-您会收到一条警告，例如“ eventDrop：2017-05-01”。
Note that both "editable" and "droppable" need to be set as "true" for all of this to work. 请注意，“编辑”和“可放置”都需要设置为“ true”才能使所有这些工作。 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). 如果您也要使事件变大或变小或更改开始时间，则可能还需要考虑处理“ 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>
解决方案2
0 2017-05-24 06:57:54
You have to set droppable to true . 您必须将droppable设置为true 。
$('#calendar').fullCalendar({
droppable: true,
drop: function(date) {
alert("Dropped on " + date.format());
}
});
Read the documentation . 阅读文档 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.