Draggable Events In Full Calendar With Modal

This is full calendar with draggable external events and color proprerty copying when drag. A modal that pop-up when external events drag into calendar and modal open when events click. Take note, error are color restoring into default when events drag back as a external lsist.

by Carl Angelo Nievarez

HTML

<script src="https://code.jquery.com/jquery-1.12.3.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://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.2.6/fullcalendar.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.5/sweetalert2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.5/sweetalert2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<form id="form1" runat="server">
  <!--Main Content-->
  <div id="main" style="margin:0px; padding:0px">
    <nav class="navbar navbar-default" id="navigation"></nav>
    <div class="container-fluid" id="main">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="javascript:void(0);" onclick="window.location='index.aspx'">Home</a></li>
        <li class="breadcrumb-item"><a href="javascript:void(0);" onclick="window.location='sales.aspx'">Sales</a></li>
        <li class="breadcrumb-item active">Delivery Planner</li>
      </ol>
      <h1>Delivery Planner</h1>
      <hr>
      <div class="row" style="width:100%;">

        <div style="width:20%;float:left;">
          <div id='external-events'>
            <div class="form-group">
              <label...

CSS

.orange {
  background-color: orange;
  border-color: orange;
}

.red {
  background-color: red;
  border-color: red;
}

.purple {
  background-color: purple;
  border-color: purple;
}


/* Button Primary */

.btn-primary {
  color: #0275d8;
  background-image: none;
  background-color: transparent;
  border-color: #0275d8;
}

.btn-primary:hover {
  background-color: #0275d8;
  color: white;
  border-color: #0275d8;
}


/*--------------------------------------------*/


/*                  CALENDAR                  */


/*--------------------------------------------*/

html,
body {
  width: 100%;
  /* font-family: monospace;*/
}

#external-events {
  padding: 0 5px;
  border: 1px solid #ccc;
}

#external-events .fc-event {
  margin: 5px 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 {
  width: 100%;
  overflow: hidden;
}

JavaScript

function filterevents() {
  $('.fc-event').hide();
  var txt = $('#item_liable_person').val();
  $('.fc-event').each(function() {
    if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) != -1) {
      $(this).show();
    }
  });
}

$("#navigation").load("navigation.html");
$("#footer").load("../footer.html");

$(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)
      id: $(this).attr('id'),
      color: $(this).data('color')
    });

    console.log('min', $(this))

    // 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'
    },

    allDaySlot: true,
    slotEventOverlap: true,

    timeFormat: 'H(:mm) a',
    editable: true,
    droppable: true, // this allows things to be dropped onto the calendar
    dragRevertDuration: 0,
    drop: function() {
      // is the "remove after drop" checkbox checked?
      if ($('#drop-remove').is(':checked')) {
        // if so, remove the element from the "Draggable Events" list
        $(this).remove();
      }


      $('#modalTitle').html(event.title);
      $('#modalBody').html(event.description);
      $('#eventUrl').attr('href', event.url);
      $('#calendarModal').modal();

      console.log("dropped");
 ...