JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.2/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.6.2/fullcalendar.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css">
<div id="calendar"></div>

JavaScript

$(function() {
  var events = Array();
  var startTime = new moment('2017-10-14T14:35');
  var endTime = startTime.clone();
  endTime.add(5, 'm');
  for (var i = 0; i < 71 * 7; i++) {
    var eventStart = startTime.format('YYYY-MM-DDTHH:mm');
    var eventEnd = endTime.format('YYYY-MM-DDTHH:mm');
    /* events.push({
       title: 'Inventories',
       start: eventStart,
       end: eventEnd,
       allDay: false
     });*/
    startTime.add(20, 'm');
    endTime = startTime.clone();
    endTime.add(5, 'm');
  }
  var btStart = new moment('2017-10-15T05:00');
  var btEnd = btStart.clone().add(30, 'm');
  for (var i = 0; i < 7; i++) {
    events.push({
      title: 'Bulk Transfers',
      start: btStart.format('YYYY-MM-DDTHH:mm'),
      end: btEnd.format('YYYY-MM-DDTHH:mm'),
      allDay: false
    });
    btStart.add(1, 'd');
    btEnd = btStart.clone().add(30, 'm');
  }

  var calendarEvents = events;
  $('#calendar').fullCalendar({
    eventMouseOver: function(ev, e, v) {
      ev.title = "test";
      console.log("here");
    },
    events: calendarEvents,
    themeSystem: 'jquery-ui',
    defaultView: 'agendaWeek',
    businessHours: {
      dow: [0, 1, 2, 3, 4, 5, 6],
      start: '5:00',
      end: '18:00'
    }
  });
});