javascript jquery fullcalendar fullcalendar-3

eventDrop and drop fullCalendar

Is it possible to use both eventDrop and drop in fullCalendar. I'm using fullCalendar plugin. 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());
            }
        });

What am i missing? I'm not able use both eventDrop and Drop

Solution

This is based on the example here: 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.

Try dragging an event onto the calendar - you'll get an alert saying e.g. "drop: 2017-05-24" and the date. Now drag that event from one time to another - you'll get an alert saying e.g. "eventDrop: 2017-05-01".

Note that both "editable" and "droppable" need to be set as "true" for all of this to work. 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).

$(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>