boeking
“`html
```html
<!-- Filters -->
<div class="p-4 bg-gray-50 border-b flex flex-wrap items-center gap-4">
<div class="flex-grow">
<div class="flex items-center space-x-4">
<button id="prev-month" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg transition">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
</button>
<h2 id="current-month" class="text-xl font-semibold"></h2>
<button id="next-month" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg transition">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<div>
<select id="foodtruck-filter" class="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500">
<option value="all">Alle foodtrucks</option>
<option value="burger">Burger Truck</option>
<option value="pizza">Pizza Truck</option>
<option value="taco">Taco Truck</option>
</select>
</div>
</div>
<!-- Calendar -->
<div class="p-6">
<div class="grid grid-cols-7 gap-2 mb-2 text-center">
<div class="font-semibold text-gray-600">Ma</div>
<div class="font-semibold text-gray-600">Di</div>
<div class="font-semibold text-gray-600">Wo</div>
<div class="font-semibold text-gray-600">Do</div>
<div class="font-semibold text-gray-600">Vr</div>
<div class="font-semibold text-gray-600">Za</div>
<div class="font-semibold text-gray-600">Zo</div>
</div>
<div id="calendar-grid" class="grid grid-cols-7 gap-2"></div>
</div>
<!-- Legend -->
<div class="px-6 pb-6 flex flex-wrap gap-4">
<div class="flex items-center">
<span class="booking-dot bg-green-500"></span>
<span>Beschikbaar</span>
</div>
<div class="flex items-center">
<span class="booking-dot bg-yellow-500"></span>
<span>Gedeeltelijk geboekt</span>
</div>
<div class="flex items-center">
<span class="booking-dot bg-red-500"></span>
<span>Volledig geboekt</span>
</div>
</div>
</div>
</div>
<!-- Booking Modal -->
<div id="booking-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="modal modal-enter bg-white rounded-xl shadow-2xl max-w-md w-full mx-4">
<div class="p-6 border-b">
<div class="flex justify-between items-center">
<h3 class="text-xl font-semibold" id="modal-title">Boeking maken</h3>
<button id="close-modal" class="text-gray-500 hover:text-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div class="p-6">
<form id="booking-form">
<div class="mb-4">
<label class="block text-gray-700 mb-2" for="selected-date">Geselecteerde datum</label>
<input type="text" id="selected-date" class="w-full px-4 py-2 border rounded-lg bg-gray-100" readonly>
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2" for="foodtruck-select">Foodtruck</label>
<select id="foodtruck-select" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500">
<option value="burger">Burger Truck</option>
<option value="pizza">Pizza Truck</option>
<option value="taco">Taco Truck</option>
</select>
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2" for="name">Naam</label>
<input type="text" id="name" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500" placeholder="Uw naam">
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2" for="email">E-mail</label>
<input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500" placeholder="uw@email.nl">
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2" for="phone">Telefoonnummer</label>
<input type="tel" id="phone" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500" placeholder="06 12345678">
</div>
<div class="mb-4">
<label class="block text-gray-700 mb-2" for="notes">Opmerkingen</label>
<textarea id="notes" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-orange-500" rows="3" placeholder="Locatie, tijdstip, aantal personen, etc."></textarea>
</div>
</form>
</div>
<div class="p-6 bg-gray-50 rounded-b-xl flex justify-end">
<button id="cancel-booking" class="px-4 py-2 text-gray-700 mr-2 hover:bg-gray-200 rounded-lg transition">Annuleren</button>
<button id="confirm-booking" class="px-6 py-2 bg-gradient-to-r from-orange-500 to-red-600 text-white rounded-lg hover:opacity-90 transition">Boeken</button>
</div>
</div>
</div>
<!-- Success Modal -->
<div id="success-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
<div class="modal modal-enter bg-white rounded-xl shadow-2xl max-w-md w-full mx-4">
<div class="p-6 text-center">
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<h3 class="text-xl font-semibold mb-2">Boeking succesvol!</h3>
<p class="text-gray-600 mb-6">Uw boeking is ontvangen. We nemen zo snel mogelijk contact met u op.</p>
<button id="close-success" class="px-6 py-2 bg-gradient-to-r from-orange-500 to-red-600 text-white rounded-lg hover:opacity-90 transition">Sluiten</button>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Sample data - in a real app this would come from a database
const bookings = {
"burger": [
{ date: "2023-11-05", status: "booked", client: "Bedrijfsfeest XYZ" },
{ date: "2023-11-12", status: "booked", client: "Bruiloft Anna & Jan" },
{ date: "2023-11-18", status: "booked", client: "Buurtfeest Amsterdam" }
],
"pizza": [
{ date: "2023-11-08", status: "booked", client: "Festival Lekker Eten" },
{ date: "2023-11-15", status: "booked", client: "Verjaardag Piet" },
{ date: "2023-11-25", status: "booked", client: "Kerstmarkt Utrecht" }
],
"taco": [
{ date: "2023-11-10", status: "booked", client: "Schoolfeest De Horizon" },
{ date: "2023-11-20", status: "booked", client: "Bedrijfsborrel ABC" },
{ date: "2023-11-27", status: "booked", client: "Winterfair Groningen" }
]
};
// Current date tracking
let currentDate = new Date();
let currentMonth = currentDate.getMonth();
let currentYear = currentDate.getFullYear();
// Initialize calendar
updateCalendar();
// Event listeners for navigation
document.getElementById('prev-month').addEventListener('click', function() {
currentMonth--;
if (currentMonth < 0) {
currentMonth = 11;
currentYear--;
}
updateCalendar();
});
document.getElementById('next-month').addEventListener('click', function() {
currentMonth++;
if (currentMonth > 11) {
currentMonth = 0;
currentYear++;
}
updateCalendar();
});
// Event listener for foodtruck filter
document.getElementById('foodtruck-filter').addEventListener('change', function() {
updateCalendar();
});
// Modal controls
document.getElementById('close-modal').addEventListener('click', closeBookingModal);
document.getElementById('cancel-booking').addEventListener('click', closeBookingModal);
document.getElementById('confirm-booking').addEventListener('click', submitBooking);
document.getElementById('close-success').addEventListener('click', closeSuccessModal);
function updateCalendar() {
const monthNames = ["Januari", "Februari", "Maart", "April", "Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November", "December"];
document.getElementById('current-month').textContent = `${monthNames[currentMonth]} ${currentYear}`;
const calendarGrid = document.getElementById('calendar-grid');
calendarGrid.innerHTML = '';
// Get first day of month and number of days
const firstDay = new Date(currentYear, currentMonth, 1).getDay();
const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
// Adjust for Monday as first day of week (0 = Monday, 6 = Sunday)
const startOffset = firstDay === 0 ? 6 : firstDay - 1;
// Add empty cells for days before the first of the month
for (let i = 0; i < startOffset; i++) {
const emptyDay = document.createElement('div');
emptyDay.className = 'calendar-day p-2 border rounded-lg bg-gray-100 opacity-50 inactive';
calendarGrid.appendChild(emptyDay);
}
// Add cells for each day of the month
for (let day = 1; day <= daysInMonth; day++) {
const dayCell = document.createElement('div');
dayCell.className = 'calendar-day p-2 border rounded-lg hover:shadow-md cursor-pointer';
const dateString = `${currentYear}-${String(currentMonth + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
dayCell.dataset.date = dateString;
// Day number
const dayNumber = document.createElement('div');
dayNumber.className = 'text-right font-medium';
dayNumber.textContent = day;
dayCell.appendChild(dayNumber);
// Check availability for this date
const availabilityDiv = document.createElement('div');
availabilityDiv.className = 'mt-2';
const selectedFilter = document.getElementById('foodtruck-filter').value;
let bookedTrucks = 0;
let truckTypes = ['burger', 'pizza', 'taco'];
if (selectedFilter !== 'all') {
truckTypes = [selectedFilter];
}
truckTypes.forEach(truckType => {
const isBooked = bookings[truckType].some(booking => booking.date === dateString);
if (isBooked) {
bookedTrucks++;
const dot = document.createElement('span');
dot.className = 'booking-dot bg-red-500';
dot.title = `${truckType.charAt(0).toUpperCase() + truckType.slice(1)} Truck: Geboekt`;
availabilityDiv.appendChild(dot);
}
});
// Set availability status
if (bookedTrucks === 0) {
const dot = document.createElement('span');
dot.className = 'booking-dot bg-green-500';
dot.title = 'Alle trucks beschikbaar';
availabilityDiv.appendChild(dot);
} else if (bookedTrucks < truckTypes.length) {
const dot = document.createElement('span');
dot.className = 'booking-dot bg-yellow-500';
dot.title = 'Sommige trucks beschikbaar';
availabilityDiv.prepend(dot);
}
dayCell.appendChild(availabilityDiv);
// Add click event to open booking modal
dayCell.addEventListener('click', function() {
openBookingModal(dateString);
});
calendarGrid.appendChild(dayCell);
}
}
function openBookingModal(dateString) {
// Format date for display
const [year, month, day] = dateString.split('-');
const formattedDate = `${day}-${month}-${year}`;
document.getElementById('selected-date').value = formattedDate;
document.getElementById('booking-modal').classList.remove('hidden');
// Reset form
document.getElementById('booking-form').reset();
document.getElementById('selected-date').value = formattedDate;
// Animate modal
setTimeout(() => {
const modal = document.querySelector('#booking-modal .modal');
modal.classList.remove('modal-enter');
}, 10);
}
function closeBookingModal() {
const modal = document.querySelector('#booking-modal .modal');
modal.classList.add('modal-enter');
setTimeout(() => {
document.getElementById('booking-modal').classList.add('hidden');
}, 300);
}
function submitBooking(e) {
e.preventDefault();
// Validate form (simple validation)
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const phone = document.getElementById('phone').value;
if (!name || !email || !phone) {
alert('Vul alle verplichte velden in');
return;
}
// In a real app, this would send data to a server
// For demo purposes, we'll just show success and close
closeBookingModal();
// Show success message
setTimeout(() => {
document.getElementById('success-modal').classList.remove('hidden');
setTimeout(() => {
const modal = document.querySelector('#success-modal .modal');
modal.classList.remove('modal-enter');
}, 10);
// Update calendar with new booking
const selectedDate = document.getElementById('selected-date').value.split('-').reverse().join('-');
const selectedTruck = document.getElementById('foodtruck-select').value;
bookings[selectedTruck].push({
date: selectedDate,
status: "booked",
client: document.getElementById('name').value
});
updateCalendar();
}, 300);
}
function closeSuccessModal() {
const modal = document.querySelector('#success-modal .modal');
modal.classList.add('modal-enter');
setTimeout(() => {
document.getElementById('success-modal').classList.add('hidden');
}, 300);
}
});
</script>