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() {
  $('#calendar').fullCalendar({
    editable: true,
    contentHeight: 'auto',
    firstDay: 1,
    nowIndicator: true,
    allDaySlot: false,
    slotDuration: '01:00:00',
    snapDuration: '00:00:01',
    axisFormat: 'HH:mm',
    timeFormat: 'HH:mm',
    timezone: 'local',
    views: {
      agendaThreeDay: {
        type: 'agenda',
        duration: {
          days: 3
        },
        buttonText: 'list 3 day'
      },
      agendaOneWeek: {
        type: 'agenda',
        duration: {
          weeks: 1
        },
        buttonText: 'list week'
      }
    },
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaThreeDay,agendaOneWeek'
    },
    defaultView: "agendaOneWeek",
    businessHours: {
      start: '06:00', // a start time (6am in this example)
      end: '18:00', // an end time (6pm in this example)
      dow: [1, 2, 3, 4, 5] // days of week (here monday till friday)
    },
    defaultDate: "2017-09-18",
    eventOverlap: function(stillEvent, movingEvent) {
        return stillEvent.rendering == "background";
    },
    events: [
    {
        start: "2017-09-18 00:00",
        end: "2017-09-18 08:00",
        color: 'red',
        rendering: 'background',
        //dow: [1],
      },
      {
        start: "2017-09-18 05:22",
        end: "2017-09-18 07:10",
        color: 'blue',
      },
      {
        start: "2017-09-18 09:22",
        end: "2017-09-18 12:37",
        color: 'blue',
      },
      {
        start: "2017-09-20 02:50",
        end: "2017-09-20 07:02",
        color: 'blue',
      }
    ]
  });
});