qds/resources/views/forms/calendar.blade.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);
    }
});


    // var calendar = new FullCalendar.Calendar(calendarEl, {
    //     initialView: 'dayGridMonth',
    //     height: 600,
    //     showNonCurrentDates: true,

    //     dateClick: function(info) {

    //         let viewMonth = calendar.view.currentStart.getMonth();
    //         let clickedMonth = info.date.getMonth();

    //         // let month = info.date.getMonth() + 1; // JS month: 0-11 → 1-12
    //         // let year = info.date.getFullYear();

    //         if (viewMonth != clickedMonth) {
    //             return; // Ignore next/prev month dates
    //         }

    //         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);
    //     }
    // });

    // yearSelect.addEventListener('change', function () {
    //     let year = this.value;
    //     if (!year) return;

    //     let currentDate = calendar.getDate();
    //     let newDate = new Date(year, currentDate.getMonth(), 1);

    //     calendar.gotoDate(newDate);
    // });

    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'));

    }

    calendar.render();
});
</script>