Currently, I'm working on a project that requires displaying data in a timeline view and I'm using FullCalendar plugin for that. I used PHP and MySQL to fetch data that need to be displayed from database.
This is the js script
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
  timeZone: 'UTC',
  aspectRatio: 1.5,
  scrollTime: '00:00',
  headerToolbar: {
    left: 'prev,next',
        center: 'title',
        right: 'resourceTimelineDay,resourceTimelineThreeDays,resourceTimelineWeek,resourceTimelineMonth'
  },
  initialView: 'resourceTimelineDay',
  
  views: {
    resourceTimelineThreeDays: {
      type: 'resourceTimeline',
      duration: { days: 3 },
      buttonText: '3 days'
    }
  },
  resourceAreaWidth: '15%',
  resourceAreaHeaderContent: 'Components',
  resources:  
  [
    
    { id: '1', title: 'Company', eventColor: 'orange' },
    { id: '3', title: 'Driver', eventColor: 'purple' },
    { id: '4', title: 'Summon', eventColor: 'red' },
    { id: '5', title: 'Summon Tracking', eventColor: 'green' }
  ],
  
  events: 
  [
    
   
   <?php  echo implode(",",$company); ?>,
   <?php  echo implode(",",$driver); ?>,
   <?php  echo implode(",",$summon); ?>,
   <?php  echo implode(",",$tracking); ?>
    
    ]
});
calendar.render();
});
And this is the php code I used to change color of event
  // Summon Tracking
      
        $sql = $connection->prepare("SELECT * FROM saman 
        WHERE vehicle_no = '".$_POST['vehicle']."'");
        $sql->execute();
        $result_track = $sql->get_result();
        $i = 1;
        
        $count_track = $result_track->num_rows;
        if($count_track > 0){
        
        while($row = $result_track->fetch_assoc())
        {
          $sqlfound = "SELECT status, driver_name from saman WHERE status='Found'";
          $sqlnotfound = "SELECT status, driver_name from saman WHERE status='Not Found'";
          if($result = mysqli_query($connection, $sqlfound)){
        $tracking[] = " { id: '".$i."', 
            resourceId: '5', 
            description: 'description for All Day Event',
            start: '".$row['datetime']."', 
            end: '".$row['datetime']."', 
            title: '".$row['status']."' }";
            // echo "<pre>";
            // print_r($trackingresource);
            // echo "</pre>";
            $i++;
        }else if($result = mysqli_query($connection, $sqlnotfound)){
          $tracking[] = " { id: '".$i."', 
            resourceId: '5', 
            start: '".$row['datetime']."', 
            end: '".$row['datetime']."', 
            title: '".$row['status']."' }";
            $i++;
        }
        }
      }else 
      {
          $tracking[] = " { id: '', 
              resourceId: '5', 
              start: '', 
              end: '',   
              title: '' }";
      }
        $sql->close();
    }
What I want to do is something like this but in timeline view.

