83 lines
2.6 KiB
PHP
83 lines
2.6 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Kalender Presensi Kurir</title>
|
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
|
|
integrity="..." crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
|
|
<style>
|
|
body {
|
|
background-color: #f8f9fa;
|
|
padding: 2rem;
|
|
}
|
|
|
|
.table-responsive {
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.fc-daygrid-event {
|
|
background-color: #0d6efd !important;
|
|
color: white !important;
|
|
border: none !important;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.75rem;
|
|
padding: 2px 4px;
|
|
}
|
|
|
|
.fc-toolbar-title {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.calendar-container {
|
|
max-width: 1000px;
|
|
margin: auto;
|
|
background: white;
|
|
padding: 1rem;
|
|
border-radius: 1rem;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="calendar-container">
|
|
<h3 class="text-center mb-4">Kalender Presensi Kurir</h3>
|
|
<div id="calendar"></div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.4/index.global.min.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const calendarEl = document.getElementById('calendar');
|
|
|
|
const calendar = new FullCalendar.Calendar(calendarEl, {
|
|
initialView: 'dayGridMonth',
|
|
locale: 'id', // Optional: Bahasa Indonesia
|
|
headerToolbar: {
|
|
left: 'prev,next',
|
|
center: 'title',
|
|
right: 'today'
|
|
},
|
|
events: [
|
|
@foreach($presenceData as $date => $names)
|
|
@foreach($names as $name)
|
|
{
|
|
title: '{{ $name }}',
|
|
start: '{{ $date }}',
|
|
allDay: true
|
|
},
|
|
@endforeach
|
|
@endforeach
|
|
]
|
|
});
|
|
|
|
calendar.render();
|
|
});
|
|
</script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
</html>
|