fullcalendar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<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>
    <p>
      <input type='checkbox' id='drop-remove' />
      <label for='drop-remove'>remove after drop</label>
    </p>
  </div>

  <div id='calendar'></div>

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

</div>

CSS

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;
}

JavaScript

$(document).ready(function() {
  $('#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
    });

  });

  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();
  console.log(y + "-" + m + "-" + d);

  $('#calendar').fullCalendar({
    defaultView: 'month',
    fixedWeekCount: false,
    editable: true,
    droppable: true,
    eventLimit: true,
    selectable: true,
    slotDuration: "00:41:00",
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    events: [{
      title: 'Sales Meeting',
      start: new Date(y, m, d, 10, 30),
      end: new Date(y, m, d, 11, 30),
      allDay: false
    }, {
      title: 'Marketing Meeting',
      start: new Date(y, m, d, 10, 30),
      end: new Date(y, m, d, 11, 30),
      allDay: false
    }, {
      title: 'Production Meeting',
      start: new Date(y, m, d, 10, 30),
      end: new Date(y, m, d, 11, 30),
      allDay: false
    }],
    eventReceive: function(event) {
      var newEventDay = event.start.startOf('day');
      var existingEvents = $("#calendar").fullCalendar("clientEvents", function(evt) {
        //this callback will run once for each existing event on the current calendar view
        //if the event has the same start date as the new event, include it in the returned list (to be counted)
        if (evt.start.startOf('day').isSame(newEventDay)) {
          return true;
        } else {
          return false;
       ...