eventDrop和drop full日历

Question

是否可以同时使用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

Answer 1

这基于此处的示例： 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>

Answer 2

您必须将droppable设置为true 。

$('#calendar').fullCalendar({
  droppable: true,
  drop: function(date) {
    alert("Dropped on " + date.format());
  }
});

阅读文档。

eventDrop和drop full日历

问题描述

2 个解决方案

解决方案1
3 已采纳 2017-05-24 08:47:14

解决方案2
0 2017-05-24 06:57:54

eventDrop和drop full日历

问题描述

2 个解决方案

解决方案1 3 已采纳 2017-05-24 08:47:14

解决方案2 0 2017-05-24 06:57:54

解决方案1
3 已采纳 2017-05-24 08:47:14

解决方案2
0 2017-05-24 06:57:54