resources/views/forms/calendar.blade.php

@@ -0,0 +1,121 @@
+<!-- <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>

resources/views/forms/save.php

@@ -0,0 +1,9 @@
+<div class="flex space-x-2 items-center">
+    <button
+        type="button"
+        class="inline-flex items-center px-3 py-1 bg-primary-600 text-white rounded hover:bg-primary-700"
+        wire:click="saveWorkingDays"
+    >
+        Save
+    </button>
+</div>