271 lines
10 KiB
PHP
271 lines
10 KiB
PHP
|
<!-- <div id='calendar'></div>
|
||
|
|
<div id="timeSlots">
|
||
|
|
<h3>Available Time Slots</h3>
|
||
|
|
<ul></ul>
|
||
|
|
</div> -->
|
||
|
|
|
||
|
|
<!-- <div id='calendar-container'> -->
|
||
|
|
<div id='calendar'></div>
|
||
|
|
<!-- </div> -->
|
||
|
|
<!-- <script>
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
var calendarEl = document.getElementById('calendar');
|
||
|
|
var timeSlotsList = document.querySelector('#timeSlots ul');
|
||
|
|
|
||
|
|
var calendar = new FullCalendar.Calendar(calendarEl, {
|
||
|
|
// plugins: ['dayGrid'],
|
||
|
|
slotMinTime: '08:00',
|
||
|
|
slotMaxTime: '20:00',
|
||
|
|
initialView: 'dayGridMonth',
|
||
|
|
header: {
|
||
|
|
left: 'prev,next today',
|
||
|
|
center: 'title',
|
||
|
|
right: 'dayGridMonth,dayGridWeek,dayGridDay'
|
||
|
|
},
|
||
|
|
// events: [
|
||
|
|
// // Your events data will go here
|
||
|
|
// ],
|
||
|
|
dateClick: function(info) {
|
||
|
|
var selectedDate = info.dateStr;
|
||
|
|
|
||
|
|
// Generate time slots for the selected date
|
||
|
|
var timeSlots = generateTimeSlots(selectedDate);
|
||
|
|
|
||
|
|
// Display time slots
|
||
|
|
displayTimeSlots(timeSlots);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
calendar.render();
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function generateTimeSlots(date) {
|
||
|
|
// Replace this with your logic to determine available time slots based on the date
|
||
|
|
var availableTimeSlots = ['10:00 AM', '11:00 AM', '2:00 PM', '4:00 PM'];
|
||
|
|
|
||
|
|
return availableTimeSlots;
|
||
|
|
}
|
||
|
|
|
||
|
|
function displayTimeSlots(timeSlots) {
|
||
|
|
// Clear existing time slots
|
||
|
|
timeSlotsList.innerHTML = '';
|
||
|
|
|
||
|
|
// Display time slots in the list
|
||
|
|
timeSlots.forEach(function(timeSlot) {
|
||
|
|
var listItem = document.createElement('li');
|
||
|
|
listItem.textContent = timeSlot;
|
||
|
|
timeSlotsList.appendChild(listItem);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script> -->
|
||
|
|
|
||
|
|
<!-- <script>
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
var calendarEl = document.getElementById('calendar');
|
||
|
|
var calendar = new FullCalendar.Calendar(calendarEl, {
|
||
|
|
initialView: 'dayGridMonth'
|
||
|
|
});
|
||
|
|
calendar.render();
|
||
|
|
});
|
||
|
|
</script> -->
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
|
||
|
|
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.addEventListener('DOMContentLoaded', function() {
|
||
|
|
var calendarEl = document.getElementById('calendar');
|
||
|
|
var slots = <?php echo json_encode($data['calendar']); ?>;
|
||
|
|
console.log(slots)
|
||
|
|
var calendar = new FullCalendar.Calendar(calendarEl, {
|
||
|
|
// height: '100%',
|
||
|
|
// expandRows: true,
|
||
|
|
// slotMinTime: '08:00',
|
||
|
|
// slotMaxTime: '20:00',
|
||
|
|
headerToolbar: {
|
||
|
|
left: 'prev,next today',
|
||
|
|
center: 'title',
|
||
|
|
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
|
||
|
|
},
|
||
|
|
initialView: 'dayGridMonth',
|
||
|
|
// initialDate: '2023-01-12',
|
||
|
|
navLinks: true, // can click day/week names to navigate views
|
||
|
|
editable: true,
|
||
|
|
selectable: true,
|
||
|
|
nowIndicator: true,
|
||
|
|
dayMaxEvents: true, // allow "more" link when too many events
|
||
|
|
events: []
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function addEvents(startDateString, selectedDays, numberOfDays, response) {
|
||
|
|
console.log('startDateString:' + startDateString)
|
||
|
|
var startDate = moment(startDateString, 'YYYY-MM-DD');
|
||
|
|
console.log('startDate:' + startDate)
|
||
|
|
|
||
|
|
var currentDay = startDate.clone();
|
||
|
|
console.log('currentDay:' + currentDay)
|
||
|
|
|
||
|
|
var addedEvents = 0;
|
||
|
|
console.log('addedEvents:' + addedEvents)
|
||
|
|
console.log('numberOfDays:' + numberOfDays)
|
||
|
|
|
||
|
|
while (addedEvents < numberOfDays) {
|
||
|
|
console.log('addedEvents:' + addedEvents)
|
||
|
|
|
||
|
|
// if (currentDay.isAfter(startDate, 'day')) {
|
||
|
|
var dayOfWeek = currentDay.format('dddd');
|
||
|
|
|
||
|
|
// var test = currentDay.isAfter(startDate, 'day');
|
||
|
|
|
||
|
|
// Check if the current day is in the selectedDays array
|
||
|
|
if (selectedDays.includes(dayOfWeek)) {
|
||
|
|
console.log('dayOfWeek:' + dayOfWeek)
|
||
|
|
console.log('isAfter:' + currentDay.isAfter(startDate, 'day'))
|
||
|
|
|
||
|
|
// console.log(startDate)
|
||
|
|
// console.log(currentDay)
|
||
|
|
// console.log(test)
|
||
|
|
// console.log("yes")
|
||
|
|
// calendar.addEvent({
|
||
|
|
// title: 'Event Title',
|
||
|
|
// start: currentDay.format('YYYY-MM-DD'),
|
||
|
|
// allDay: true,
|
||
|
|
// // You can add more properties to the event as needed
|
||
|
|
// });
|
||
|
|
|
||
|
|
|
||
|
|
var week_day = dayOfWeek.charAt(0).toLowerCase() + dayOfWeek.slice(1);
|
||
|
|
|
||
|
|
var events = response[week_day];
|
||
|
|
console.log(events)
|
||
|
|
// var targetDay = moment().day(dayOfWeek);
|
||
|
|
// console.log(targetDay)
|
||
|
|
|
||
|
|
events.forEach(function(event) {
|
||
|
|
// var startDateTime = moment(`${dayOfWeek} ${event.from}`, 'dddd HH:mm');
|
||
|
|
// var endDateTime = moment(`${dayOfWeek} ${event.to}`, 'dddd HH:mm');
|
||
|
|
// Adjust startDateTime calculation
|
||
|
|
// If the target day is today or in the past, get the next occurrence
|
||
|
|
|
||
|
|
// console.log(targetDay)
|
||
|
|
// if (targetDay.isBefore(currentDay, 'day')) {
|
||
|
|
// targetDay.add(1, 'week');
|
||
|
|
// // var newTarget = targetDay.clone().add(1, 'week');
|
||
|
|
// console.log(targetDay)
|
||
|
|
// // console.log(newTarget)
|
||
|
|
|
||
|
|
// }
|
||
|
|
// var daysToAdd = targetDay.diff(currentDay, 'days');
|
||
|
|
// console.log(daysToAdd)
|
||
|
|
// var startDateTime = currentDay.clone().add(daysToAdd, 'days');
|
||
|
|
var startDateTime = currentDay.clone();
|
||
|
|
|
||
|
|
// Use the event time as usual
|
||
|
|
startDateTime.set({
|
||
|
|
hour: event.from.split(':')[0],
|
||
|
|
minute: event.from.split(':')[1]
|
||
|
|
});
|
||
|
|
|
||
|
|
var endDateTime = moment(startDateTime).set({
|
||
|
|
hour: event.to.split(':')[0],
|
||
|
|
minute: event.to.split(':')[1]
|
||
|
|
});
|
||
|
|
calendar.addEvent({
|
||
|
|
title: event.point + "points",
|
||
|
|
start: startDateTime.format(),
|
||
|
|
end: endDateTime.format(),
|
||
|
|
// You can add more properties to the event as needed
|
||
|
|
});
|
||
|
|
// if (targetDay.isAfter(currentDay, 'day')) {
|
||
|
|
// console.log('yes')
|
||
|
|
// targetDay.add(1, 'week');
|
||
|
|
// }
|
||
|
|
// targetDay = newTarget
|
||
|
|
// targetDay.add(1, 'week');
|
||
|
|
// var newTarget = targetDay.clone().add(1, 'week');
|
||
|
|
// daysToAdd = newTarget.diff(currentDay, 'days');
|
||
|
|
// console.log(daysToAdd)
|
||
|
|
|
||
|
|
// console.log(newTarget)
|
||
|
|
|
||
|
|
});
|
||
|
|
addedEvents++;
|
||
|
|
}
|
||
|
|
// }
|
||
|
|
currentDay.add(1, 'days'); // Move to the next day
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// function addEvents(response) {
|
||
|
|
// for (var dayOfWeek in response) {
|
||
|
|
// if (response.hasOwnProperty(dayOfWeek)) {
|
||
|
|
// var events = response[dayOfWeek];
|
||
|
|
|
||
|
|
// events.forEach(function(event) {
|
||
|
|
// var startDateTime = moment(`${dayOfWeek} ${event.from}`, 'dddd HH:mm');
|
||
|
|
// var endDateTime = moment(`${dayOfWeek} ${event.to}`, 'dddd HH:mm');
|
||
|
|
|
||
|
|
// calendar.addEvent({
|
||
|
|
// title: 'Event Title',
|
||
|
|
// start: startDateTime.format(),
|
||
|
|
// end: endDateTime.format(),
|
||
|
|
// // You can add more properties to the event as needed
|
||
|
|
// });
|
||
|
|
// });
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
url: '/admin/calendar',
|
||
|
|
method: 'POST',
|
||
|
|
data: {
|
||
|
|
calendar: slots
|
||
|
|
},
|
||
|
|
success: function(response) {
|
||
|
|
// console.log(response.slots_available);
|
||
|
|
response = JSON.parse(response)
|
||
|
|
console.log(response);
|
||
|
|
var slot = JSON.parse(response.slot)
|
||
|
|
var days = parseInt(JSON.parse(response.days))
|
||
|
|
var keysArray = Object.keys(slot);
|
||
|
|
|
||
|
|
console.log(keysArray);
|
||
|
|
|
||
|
|
var currentDate = new Date();
|
||
|
|
|
||
|
|
// Extract year, month, and day
|
||
|
|
var year = currentDate.getFullYear();
|
||
|
|
var month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); // Months are zero-based
|
||
|
|
var day = currentDate.getDate().toString().padStart(2, '0');
|
||
|
|
|
||
|
|
// Form the desired date string
|
||
|
|
var formattedDate = `${year}-${month}-${day}`;
|
||
|
|
console.log(keysArray.length)
|
||
|
|
|
||
|
|
var capitalizedArray = keysArray.map(function(str) {
|
||
|
|
return str.charAt(0).toUpperCase() + str.slice(1);
|
||
|
|
});
|
||
|
|
console.log(formattedDate + "ajax")
|
||
|
|
addEvents(formattedDate, capitalizedArray, days, slot);
|
||
|
|
|
||
|
|
// alert(JSON.stringify(response));
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
error: function(xhr, status, error) {
|
||
|
|
console.log(error)
|
||
|
|
// console.log("error oooo")
|
||
|
|
}
|
||
|
|
});
|
||
|
|
// Example: Start date is '2023-12-12', selected days are ['Monday', 'Thursday'], and number of days is 2
|
||
|
|
|
||
|
|
calendar.render();
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|