JSFiddle - React, Tailwind, and code Playground

by Marech

HTML

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://fullcalendar.io/releases/core/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/interaction/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/daygrid/4.2.0/main.min.js"></script>
<script src="https://fullcalendar.io/releases/timegrid/4.2.0/main.min.js"></script>
<link rel="stylesheet" href="https://fullcalendar.io/releases/core/4.2.0/main.min.css">
<link rel="stylesheet" href="https://fullcalendar.io/releases/daygrid/4.2.0/main.min.css">
<link rel="stylesheet" href="https://fullcalendar.io/releases/timegrid/4.2.0/main.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>
<button class="add-installation" onclick="GetEvents()">Get Events</button>

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

<div class="modal fade" id="add-event">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4>New Event</h4>
      </div>
      <div class="modal-body">
        <form role="form">
          <div class="form-group">
            <label for="Eventname">Event Name</label>
            <input type="text" class="form-control" id="event-name" placeholder="Enter event name">
          </div>
          <div class="form-group">
            <div class='input-group date' id='event-start' style="margin-top: 15px">
              <input type='text' class="form-control" />
              <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
              </span>
           ...

JavaScript

var configCalendar;

var calendarEl = document.getElementById('calendar');
configCalendar = new FullCalendar.Calendar(calendarEl, {
  editable:true,
  height: 'parent',
  contentHeight:'100%',
  handleWindwoResize:true,
  plugins: ['interaction','dayGrid','timeGrid', 'list'],
  defaultView: 'timeGridWeek',
  minTime: '00:00:00',
  slotDuration: '02:00:00',
  scrollTime : '08:00:00',
  firstDay: 0,
  columnHeaderFormat:{
    weekday:'long',
    day:'numeric',
    month:'long'
  },
  eventClick : function(info){
    $("#startTime").html(CalendarDate2String(info.event.start));
    $("#endTime").html(CalendarDate2String(info.event.end));
    $("#name").val(info.event.title);
    $("#id").text(info.event.id);
    $("#eventInfo").html(info.event.description);
    $("#eventLink").attr('href', info.event.url);
    $("#eventContent").modal('show');
  },
  eventDrop: function (info) {
    console.log("event drop");
    if (!copyKey) return;
    var length = configCalendar.getEvents.length;
    var eClone = {
      title: info.oldEvent.title,
      start: info.oldEvent.start,
      end: info.oldEvent.end,
      id: length + 1
    };
    configCalendar.addEvent(eClone);
    var newEvent = configCalendar.getEventById(info.event.id);
    var title = prompt("Enter a title for the new Event : ");
    newEvent.setProp('title', title);
  },
  eventTimeFormat: {
    hour: '2-digit',
    minute: '2-digit'
  },
  eventOverlap:false,
  selectOverlap:false,
  header: {
    left:   '',
    center: 'title',
    right:  'today prev,next'
  },
  selectable: true,
  select:function (info) {
    var event  = {
            id: configCalendar.getEvents().length + 1,
            daysOfWeek: [info.start.getDay()],
            startTime: moment(info.start).format('HH:mm'),
            endTime: moment(info.end).format('HH:mm')
        };
        configCalendar.addEvent(event);
    console.log(event);
    console.log(configCalendar.getEvents());
  }
});
configCalendar.render();

function...