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='calendar'>

</div>

JavaScript

$(document).ready(function() {

  $('#external-events .fc-event').draggable({
    revert: true, // immediately snap back to original position
    revertDuration: 0 //
  });
  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();
  console.log(y + "-" + m + "-" + d);

  $('#calendar').fullCalendar({
    defaultView: 'agendaThreeDay',
    fixedWeekCount: false,
    editable: true,
    droppable: true,
    eventLimit: true,
    selectable: true,
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'agendaThreeDay,listThreeDay,agendaDay,month'
    },
    views: {
      agendaThreeDay: {
        type: 'agenda',
        duration: {
          days: 3
        },
        buttonText: '3 day agenda'
      },
      listThreeDay: {
        type: 'list',
        duration: {
          days: 3
        },
        buttonText: '3 day list'
      }
    },
    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 + 1, 10, 30),
      end: new Date(y, m, d + 1, 11, 30),
      allDay: false
    }, {
      title: 'Production Meeting',
      start: new Date(y, m, d + 2, 10, 30),
      end: new Date(y, m, d + 2, 11, 30),
      allDay: false
    }, {
      title: 'Outside 3 days',
      start: new Date(y, m, d + 3, 10, 30),
      end: new Date(y, m, d + 3, 11, 30),
      allDay: false
    }, {
      title: 'Outside 3 days v2',
      start: new Date(y, m, d + 4, 10, 30),
      end: new Date(y, m, d + 4, 11, 30),
      allDay: false
    }]
  });
});