![](/img/trans.png)
[英]How to get end time on drop and eventDrop with external elements in FullCalendar?
[英]eventDrop and drop fullCalendar
是否可以同時使用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回調,以及顯示回調已發生的警報。
嘗試將事件拖到日歷上-您會收到一條警告,例如“ drop: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>
您必須將droppable
設置為true
。
$('#calendar').fullCalendar({
droppable: true,
drop: function(date) {
alert("Dropped on " + date.format());
}
});
閱讀文檔 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.