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.