Full calendar showing events on month but not week/day timegrid

I'm trying to use full calendar. I am successfully rendering the events per day when using the month view. But when I switch to a week timegrid or a day timegrid, even though the events are showing the correct start time, the event is not rendered on the week or day time grid.

Here is my php code where I'm creating an array:

$events = array();
foreach ($todos as $event) {
            array_push($events, ['title' => $event->content, 'start' => $event->view_date.'T'.$event->appointment_time, 'backgroundColor' => $event->typeColor($event->type)]);
        }

and here is what the php returns when i console log $events:

Array(3)
0:
title: "Test of the voice integration system"
start: "2020-02-21T07:15:00"
backgroundColor: "#b1b3b1"
allDay: false
1:
title: "Test"
start: "2020-02-21T10:14:00"
backgroundColor: "#b1b3b1"
allDay: false

and here is my full calendar set up:

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js" integrity="sha256-GBryZPfVv8G3K1Lu2QwcqQXAO4Szv4xlY4B/ftvyoMI=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js" integrity="sha256-FT1eN+60LmWX0J8P25UuTjEEE0ZYvpC07nnU6oFKFuI=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/interaction/main.min.js" integrity="sha256-MUHmW5oHmLLsvmMWBO8gVtKYrjVwUSFau6pRXu8dtnA=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.js" integrity="sha256-L9T+qE3Ms6Rsuxl+KwLST6a3R/2o6m33zB5mR2KyPjU=" crossorigin="anonymous"></script>
<script>
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'dayGrid',
                  'interaction',
                  'timeGrid'
                ],
      header: {
              left: 'prev,next today',
              center: 'title',
              right: 'dayGridMonth, timeGridWeek, timeGridDay'
              },
      events: {!!json_encode($events)!!},
      height: "auto",
      eventClick: function(info){console.log(info)}
    });
    calendar.render();
</script>

So I'm creating an array, then sending it to my view and assigning the events parameter as the value of that array. If the calendar is rendering it correctly on the month view, what am I doing wrong so that it's not rendering on the week or day view?

try this, might help

 [{'title': 'Successful','allDay': false,'start': 1266398223,'end': 1266398266,'url': '/shlk/cgi-bin/getshlkrunlog.pl?i=21'}]  

check syntax though

or using JS

 $('#calendar').fullCalendar({
    ...
allDayDefault: false,
    ...
});

or if it's a css Issue add following

table td
{
overflow: inherit !important;
}