122 lines
3.5 KiB
PHP
122 lines
3.5 KiB
PHP
<!-- <select id="yearSelect">
|
||
<option value="">Select Year</option>
|
||
</select> -->
|
||
|
||
|
||
<div id="calendar" wire:ignore></div>
|
||
|
||
|
||
<!-- <input type="text" name="working_days" placeholder="Working Days"> -->
|
||
|
||
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.css" rel="stylesheet">
|
||
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function () {
|
||
|
||
let selectedDates = [];
|
||
let calendarEl = document.getElementById('calendar');
|
||
|
||
var calendar = new FullCalendar.Calendar(calendarEl, {
|
||
initialView: 'dayGridMonth',
|
||
height: 600,
|
||
showNonCurrentDates: true,
|
||
|
||
datesSet: function(info) {
|
||
// Clear previous month selections
|
||
selectedDates = [];
|
||
|
||
// Remove background events
|
||
calendar.removeAllEvents();
|
||
|
||
// Recalculate working days for new month
|
||
updateWorkingDays(info.view.currentStart);
|
||
},
|
||
|
||
dateClick: function(info) {
|
||
|
||
let viewMonth = calendar.view.currentStart.getMonth();
|
||
let clickedMonth = info.date.getMonth();
|
||
|
||
if (viewMonth != clickedMonth) return;
|
||
|
||
let dateStr = info.dateStr;
|
||
|
||
if (selectedDates.includes(dateStr)) {
|
||
selectedDates = selectedDates.filter(d => d !== dateStr);
|
||
|
||
calendar.getEvents().forEach(event => {
|
||
if (event.startStr == dateStr) event.remove();
|
||
});
|
||
|
||
} else {
|
||
selectedDates.push(dateStr);
|
||
|
||
calendar.addEvent({
|
||
start: dateStr,
|
||
display: 'background',
|
||
color: '#f03f17'
|
||
});
|
||
}
|
||
|
||
updateWorkingDays(info.date);
|
||
}
|
||
});
|
||
|
||
|
||
function updateWorkingDays(date) {
|
||
let totalDays = new Date(
|
||
date.getFullYear(),
|
||
date.getMonth()+1,
|
||
0
|
||
).getDate();
|
||
|
||
let workingDays = totalDays - selectedDates.length;
|
||
// document.querySelector('input[name="working_days"]').value = workingDays;
|
||
|
||
const input = document.querySelector('#working_days');
|
||
|
||
input.value = workingDays;
|
||
|
||
input.dispatchEvent(new Event('input'));
|
||
|
||
const monthInput = document.querySelector('#month');
|
||
monthInput.value = date.getMonth() + 1; // 1–12 month number
|
||
monthInput.dispatchEvent(new Event('input'));
|
||
|
||
const yearInput = document.querySelector('#year');
|
||
yearInput.value = date.getFullYear();
|
||
yearInput.dispatchEvent(new Event('input'));
|
||
|
||
const selectedDatesInput = document.querySelector('#selected_dates');
|
||
selectedDatesInput.value = selectedDates.join(',');
|
||
selectedDatesInput.dispatchEvent(new Event('input'));
|
||
|
||
}
|
||
|
||
// function updateWorkingDays(date) {
|
||
// let totalDays = new Date(
|
||
// date.getFullYear(),
|
||
// date.getMonth() + 1,
|
||
// 0
|
||
// ).getDate();
|
||
|
||
// let workingDays = totalDays - selectedDates.length;
|
||
|
||
// // Set values only
|
||
// document.querySelector('#working_days').value = workingDays;
|
||
// document.querySelector('#month').value = date.getMonth() + 1;
|
||
// document.querySelector('#year').value = date.getFullYear();
|
||
// document.querySelector('#selected_dates').value = selectedDates.join(',');
|
||
|
||
// // Trigger only ONE update (important)
|
||
// document
|
||
// .querySelector('#selected_dates')
|
||
// .dispatchEvent(new Event('input'));
|
||
// }
|
||
|
||
|
||
calendar.render();
|
||
});
|
||
</script>
|