bootstrap full calender not working for day tab

Question

My calendar is working properly. But in day section it's not showing the events from start time to end time its showing on full day only.

I am newbie here, help me in this, thanks in advance.

<div id="fullCalModal"  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">×</span> <span class="sr-only">close</span></button>
                    <h4 id="modalTitle" style="text-align: center;" class="modal-title"></h4>
                </div>
               <h6>Description: </h6> <div id="modalBody" class="modal-body"></div><hr>
               <h6>Start Time: </h6><div id="starttime" class="modal-body"></div>
               <h6>End Time: </h6><div id="endtime" class="modal-body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>                
    <script type="text/javascript">

                $(document).ready(function()
                {
                    var currentDate = '<?php echo date('Y-m-d'); ?>';
                    $('#custom-calendar').fullCalendar(
                      {
                        header:
                        {
                            left: 'prev,next today',
                            center: 'title',
                            right: 'month,agendaWeek,agendaDay',
                        },
                        defaultDate: currentDate,
                        businessHours: true, 
                        editable: true,
                        events: <?= $response ?>,
                        eventClick:  function(events) {
                        $('#fullCalModal').modal('show');
                        $('#modalTitle').html(events.title);
                        $('#modalBody').html(events.details);
                        $('#starttime').html(events.stime);
                        $('#endtime').html(events.etime);

                  }
                    });
                });
    </script>

---

Output

In this image not showing start time to end time selection in day tab of my calendar. I want a selection if start date is from 2 O'clock and end date is 5 O'clock.

Answer 1

need to set the allDay attribute to false , that it's usually true as configuration default; from the docs: See Answer Here