document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'timeGridWeek', // This view shows the week view with time slots
nowIndicator: true, // Displays a current time indicator
selectable: true, // Allows users to select time slots
editable: true, // Allows users to drag and drop events
eventDurationEditable: false, // Prevents resizing of events
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'timeGridWeek,timeGridDay'
},
select: function(info) {
// Restrict to 5 bookings and enforce one booking per day
var events = calendar.getEvents();
var eventDates = events.map(event => event.start.toISOString().split('T')[0]);
var selectedDate = info.startStr.split('T')[0];
if (events.length < 5 && !eventDates.includes(selectedDate)) {
// Add new event on date click or selection
calendar.addEvent({
title: "Booked",
start: info.startStr,
end: info.endStr,
allDay: false,
backgroundColor: '#ff9f89', // Customize the color of booked slots
borderColor: '#ff9f89'
});
} else if (eventDates.includes(selectedDate)) {
alert('You have already booked a slot on this day.');
} else if (events.length >= 5) {
alert('You have reached the maximum number of bookings (5).');
}
calendar.unselect(); // clear date selection
},
events: [
// Load this array with events from your database or an API
]
});
calendar.render();
});
;
