FullCalendar drag & drop events between multiple calendars

FullCalendar drag & drop events between multiple calendars.markdown

FullCalendar drag & drop events between multiple calendars

Drag and drop events between calendars and to draggable events.

Forked from Subodh Ghulaxe's Pen FullCalendar drag & drop events between multiple calendars.

A Pen by Zagora on CodePen.

License.

index.html

<div id='wrap'>

		        <div id='external-events'>
		          <div id='external-events-listing'>
		            <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>
		          <p>
		            <input type='checkbox' id='drop-remove' checked='checked' />
		            <label for='drop-remove'>remove after drop</label>
		          </p>
		        </div>
		        <div class="container">
		            <div class="col-md-12">
		              
		              <div class="col-md-6 mb-20">
		                <div id='calendar1'></div>
		              </div>
		              
		              <div class="col-md-6 mb-20">
		                <div id='calendar2'></div>
		              </div>
		              
		              <div class="col-md-6 mb-20">
		                <div id='calendar3'></div>
		              </div>
		              
		            </div>
		        </div>

		        <div style='clear:both'></div>

		</div>

script.js

$(document).ready(function() {

				// Manage status of dragging event and calendar
				var calEventStatus = [];


				/* Required functions */

		        var isEventOverDiv = function(x, y) {

		            var external_events = $( '#external-events' );
		            var offset = external_events.offset();
		            offset.right = external_events.width() + offset.left;
		            offset.bottom = external_events.height() + offset.top;

		            // Compare
		            if (x >= offset.left
		                && y >= offset.top
		                && x <= offset.right
		                && y <= offset .bottom) { return true; }
		            return false;

		        }


		        function makeEventsDraggable () { 
			       
			        $('.fc-draggable').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
			            });

			            console.log('makeEventsDraggable');

			            // Dirty fix to remove highlighted blue background
			            $("td").removeClass("fc-highlight");

					});

			    }



		        /* 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 calendar1
		        -----------------------------------------------------------------*/

		        $('#calendar1').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
		            dragRevertDuration: 0,
		            eventLimit: true, // allow "more" link when too many events
		            drop: function(date, jsEvent, ui) { console.log('calendar 1 drop'); console.log(date); console.log(jsEvent); console.log(ui); console.log(this);
		                // is the "remove after drop" checkbox checked?
		                if ($('#drop-remove').is(':checked')) {
		                    // if so, remove the element from the "Draggable Events" list
		                    $(this).remove();
		                }

		                // if event dropped from another calendar, remove from that calendar
		                if (typeof calEventStatus['calendar'] != 'undefined') {
		                	$(calEventStatus['calendar']).fullCalendar('removeEvents', calEventStatus['event_id']);
		                	//$(calEventStatus['calendar']).fullCalendar('unselect');
						}

		                makeEventsDraggable();
		            },
		            eventReceive: function( event ) {  console.log('calendar 1 eventReceive');
		            	makeEventsDraggable();
		            },
		            eventDrop: function( event, delta, revertFunc, jsEvent, ui, view ) {  console.log('calendar 1 eventDrop');
		            	makeEventsDraggable();
		            },
		            eventDragStart: function( event, jsEvent, ui, view ) {
		            	console.log(event); console.log(jsEvent); console.log(ui); console.log(view);

		            	// Add dragging event in global var 
		            	calEventStatus['calendar'] = '#calendar1';
		            	calEventStatus['event_id'] = event._id;
		            	console.log('calendar 1 eventDragStart');
		            },
		            eventDragStop: function( event, jsEvent, ui, view ) { console.log('calendar 1 eventDragStop');
		                
		                if(isEventOverDiv(jsEvent.clientX, jsEvent.clientY)) {
		                    $('#calendar1').fullCalendar('removeEvents', event._id);
		                    var el = $( "<div class='fc-event'>" ).appendTo( '#external-events-listing' ).text( event.title );
		                    el.draggable({
		                      zIndex: 999,
		                      revert: true, 
		                      revertDuration: 0 
		                    });
		                    el.data('event', { title: event.title, id :event.id, stick: true });
		                }

		                calEventStatus = []; // Empty
		                makeEventsDraggable();
		            },
		            eventResize: function( event, delta, revertFunc, jsEvent, ui, view ) {
		                makeEventsDraggable();
		            },
		            viewRender: function() { console.log('calendar 1 viewRender');
		                makeEventsDraggable();
		            },
		        });
		  
		  
		        /* initialize the calendar2
		        -----------------------------------------------------------------*/

		        $('#calendar2').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
		            dragRevertDuration: 0,
		            eventLimit: true, // allow "more" link when too many events
		            drop: function(date, jsEvent, ui) { console.log('calendar 2 drop'); console.log(date); console.log(jsEvent); console.log(ui); console.log(this);
		            	
		                // is the "remove after drop" checkbox checked?
		                if ($('#drop-remove').is(':checked')) {
		                    // if so, remove the element from the "Draggable Events" list
		                    $(this).remove();
		                }

		                // if event dropped from another calendar, remove from that calendar
		                if (typeof calEventStatus['calendar'] != 'undefined') {
		                	$(calEventStatus['calendar']).fullCalendar('removeEvents', calEventStatus['event_id']);
						}

		                makeEventsDraggable();
		            },
		            eventReceive: function( event ) { console.log('calendar 2 eventReceive');
		            	makeEventsDraggable();
		            },
		            eventDrop: function( event, delta, revertFunc, jsEvent, ui, view ) { console.log('calendar 2 eventDrop');
		            	makeEventsDraggable();
		            },
		            eventDragStart: function( event, jsEvent, ui, view ) {

		            	// Add dragging event in global var 
		            	calEventStatus['calendar'] = '#calendar2';
		            	calEventStatus['event_id'] = event._id; 
		            	console.log('calendar 2 eventDragStart');
		            },
		            eventDragStop: function( event, jsEvent, ui, view ) {  console.log('calendar 2 eventDragStop');
		                
		                if(isEventOverDiv(jsEvent.clientX, jsEvent.clientY)) {
		                    $('#calendar2').fullCalendar('removeEvents', event._id);
		                    var el = $( "<div class='fc-event'>" ).appendTo( '#external-events-listing' ).text( event.title );
		                    el.draggable({
		                      zIndex: 999,
		                      revert: true, 
		                      revertDuration: 0 
		                    });
		                    el.data('event', { title: event.title, id :event.id, stick: true });
		                }

		                calEventStatus = []; // Empty
		                makeEventsDraggable();
		            },
		            eventResize: function( event, delta, revertFunc, jsEvent, ui, view ) {
		                makeEventsDraggable();
		            },
		            viewRender: function() { console.log('calendar 2 viewRender');
		                makeEventsDraggable();
		            },
		        });

		  
		        /* initialize the calendar3
		        -----------------------------------------------------------------*/

		        $('#calendar3').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
		            dragRevertDuration: 0,
		            eventLimit: true, // allow "more" link when too many events
		            drop: function(date, jsEvent, ui) { console.log('calendar 3 drop'); console.log(date); console.log(jsEvent); console.log(ui); console.log(this);
		                // is the "remove after drop" checkbox checked?
		                if ($('#drop-remove').is(':checked')) {
		                    // if so, remove the element from the "Draggable Events" list
		                    $(this).remove();
		                }

		                // if event dropped from another calendar, remove from that calendar
		                if (typeof calEventStatus['calendar'] != 'undefined') {
		                	$(calEventStatus['calendar']).fullCalendar('removeEvents', calEventStatus['event_id']);
						}

		                makeEventsDraggable();
		            },
		            eventReceive: function( event ) {  console.log('calendar 3 eventReceive');
		            	makeEventsDraggable();
		            },
		            eventDrop: function( event, delta, revertFunc, jsEvent, ui, view ) {  console.log('calendar 3 eventDrop');
		            	makeEventsDraggable();
		            },
		            eventDragStart: function( event, jsEvent, ui, view ) {
		            	console.log(event); console.log(jsEvent); console.log(ui); console.log(view);

		            	// Add dragging event in global var 
		            	calEventStatus['calendar'] = '#calendar3';
		            	calEventStatus['event_id'] = event._id;
		            	console.log('calendar 3 eventDragStart');
		            },
		            eventDragStop: function( event, jsEvent, ui, view ) { console.log('calendar 3 eventDragStop');
		                
		                if(isEventOverDiv(jsEvent.clientX, jsEvent.clientY)) {
		                    $('#calendar3').fullCalendar('removeEvents', event._id);
		                    var el = $( "<div class='fc-event'>" ).appendTo( '#external-events-listing' ).text( event.title );
		                    el.draggable({
		                      zIndex: 999,
		                      revert: true, 
		                      revertDuration: 0 
		                    });
		                    el.data('event', { title: event.title, id :event.id, stick: true });
		                }

		                calEventStatus = []; // Empty
		                makeEventsDraggable();
		            },
		            eventResize: function( event, delta, revertFunc, jsEvent, ui, view ) {
		                makeEventsDraggable();
		            },
		            viewRender: function() { console.log('calendar 3 viewRender');
		                makeEventsDraggable();
		            },
		        });
				

		    });

scripts

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.js"></script>

style.css

body {
  margin-top: 40px;
  text-align: center;
  font-size: 14px;
  font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}

#wrap {
  width: 1500px;
  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;
}
.mb-20{
  margin-bottom:20px;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.7/fullcalendar.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />