JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/fullcalendar.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/fullcalendar.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.0/lang/pt.js"></script>
<div id='calendar'></div>
<div id="calendarModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span> <span class="sr-only">close</span></button>
        <h4 id="modalTitle" class="modal-title">Adicionar Tarefa</h4>
      </div>
      <div id="modalBody" class="modal-body">
        <form id="frmNewAppointment" action="#">
          Nome tarefa:
          <input type="text" id="title" required="required" />
          <br /> Hora in&iacute;cio:
          <input type="time" id="startTime" />
          <br /> Hora fim:
          <input type="time" id="endTime" />
          <br />
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" id="btnClose">Close</button>
        <button type="submit" class="btn btn-primary" id="btnSubmit">Save</button>
      </div>
    </div>
  </div>
</div>
</body>

JavaScript

$(document).ready(function() {
  var currDay = null;
  var currDate = null;
  var eventData = null;
  var appointments = [];
  loadCalendar();

  function loadCalendar() {
    $("#calendar").fullCalendar({
      dayClick: function(date) {
        currDay = this;
        currDate = new Date(date._d);
        console.log(date);
        $('#calendarModal').modal("show");
      },
      displayEventEnd: true,
      timeFormat: 'H:mm'
      //events: appointments
    });
  }
  $("#btnSubmit").click(function() {
    $("#calendarModal").modal("hide");
    $(currDay).css('background-color', '#99CCFF');
    $("#calendar").fullCalendar('renderEvent', {
      title: $('#title').val(),
      start: currDate.setHours($('#startTime').val().split(":")[0], $('#startTime').val().split(":")[1]),
      end: currDate.setHours($('#endTime').val().split(":")[0], $('#endTime').val().split(":")[1])
    }, true);
    console.log($('#title').val(), $('#startTime').val(), $('#endTime').val(), currDate);
    $("#frmNewAppointment").trigger("reset");
  });
});