JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<label>date</label>
<input type="text" >

    <div id='calendar'></div>
 
<script type="text/javascript">
 $(function(){

$('#trigger').click(function(){
  $('#myModal').modal('show');
  return false;
})

});
  $(document).ready(function() {
    $('#calendar').fullCalendar({
      defaultDate: '2018-02-01',
      selectable: true,
      dayClick: function(date, jsEvent, view) {
        alert('Date:' + date.format());
        $('input[type="text"]').val(date.format());
       },
      editable: true,
      eventLimit: true, 
      events: [
        {
          title: 'count(2)',
          start: '2018-02-01'
        },
        {
          title: 'count(2)',
          start: '2018-02-02'
        },
        {
          title: 'count(2)',
          start: '2018-02-03'
        },
        {
          title: 'count(2)',
          start: '2018-02-04'
        },
        {
          title: 'count(2)',
          start: '2018-02-05'
        }
      ]

    });

  });
</script>