full-calendar basic example

HTML

<link rel="stylesheet" href="http://fullcalendar.io/js/fullcalendar-2.2.5/fullcalendar.css">
<script src="http://fullcalendar.io/js/fullcalendar-2.2.5/lib/moment.min.js"></script>
<script src="http://fullcalendar.io/js/fullcalendar-2.2.5/fullcalendar.min.js"></script>
<div>
  <div id='calendar1' class='inner pink'></div>
  <div id='calendar2' class='inner red'></div>
</div>

CSS

.inner {
  position: absolute;
}

.pink {
  background: pink;
  z-index: 1;
}

.red {
  background: red;
  z-index: 2;
}

JavaScript

$(document).ready(function() {

  $('#calendar1').fullCalendar({
    editable: true,
    events: [{
      title: 'Event 1',
      start: '2018-06-01',
    }]
  });
  $('#calendar2').fullCalendar({
    editable: true,
    events: [{
      title: 'Event 2',
      start: '2018-06-02',
    }],
    eventDragStart: function(event, jsEvent, ui, view) {
      $('#calendar2').css('z-index', 0);
      $(this).css('z-index', 999);
    },
    eventDragStop: function(event, jsEvent, ui, view) {
       $('#calendar2').css('z-index', 2);
    }
  });
});