Question

是否可以同时使用eventDrop和drop 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”。

请注意，“editable”和“droppable”都需要设置为“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

您必须将(function (exports, require, module, __filename, __dirname) { var user:string = "Jane User"; ^ SyntaxError: Unexpected token : at Object.exports.runInThisContext (vm.js:76:16) at Module._compile (module.js:542:28) at Object.Module._extensions..js (module.js:579:10) at Module.load (module.js:487:32) at tryModuleLoad (module.js:446:12) at Function.Module._load (module.js:438:3) at Module.runMain (module.js:604:10) at run (bootstrap_node.js:394:7) at startup (bootstrap_node.js:149:9) at bootstrap_node.js:509:3设置为droppable。

true

阅读documentation。

eventDrop并删除fullCalendar

2 个答案: