WooCommerce Multi-Date Picker: Complete Guide

/* Keep date picker container below date fields */
.woocommerce-bookings-date-picker {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
}

/* Adjust calendar popup position */
.woocommerce-bookings-calendar {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: 10px !important;
    z-index: 9999 !important;
}

/* Ensure calendar stays visible after date selection */
.woocommerce-bookings-calendar.active {
    display: block !important;
}

/* Style adjustments for better UX */
.woocommerce-bookings-date-picker .ui-datepicker {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border-radius: 4px;
    border: 1px solid #ddd;
}

jQuery(document).ready(function($) {
    // Store selected dates
    let selectedDates = [];
    
    // Override default WooCommerce booking behavior
    $('.woocommerce-bookings-date-picker').each(function() {
        const $datePicker = $(this);
        const $input = $datePicker.find('input');
        
        // Prevent default date picker behavior
        $input.off('click');
        
        // Custom calendar rendering
        $input.click(function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            // Show custom calendar
            showCustomCalendar($datePicker, $input);
        });
    });
    
    function showCustomCalendar($container, $input) {
        // Create custom calendar HTML
        const calendarHtml = `
            <div class="custom-multi-date-calendar">
                <div class="calendar-header">
                    <button class="prev-month">&lt;</button>
                    <span class="current-month"></span>
                    <button class="next-month">&gt;</button>
                </div>
                <div class="calendar-grid"></div>
                <div class="selected-dates">
                    <h4>Selected Dates:</h4>
                    <ul class="date-list"></ul>
                </div>
            </div>
        `;
        
        $container.append(calendarHtml);
        
        // Initialize calendar
        initializeCustomCalendar($container);
    }
    
    function initializeCustomCalendar($container) {
        const $calendar = $container.find('.custom-multi-date-calendar');
        const $grid = $calendar.find('.calendar-grid');
        const $monthDisplay = $calendar.find('.current-month');
        
        let currentDate = new Date();
        
        // Render calendar
        renderCalendar(currentDate, $grid, $monthDisplay);
        
        // Event handlers
        $calendar.find('.prev-month').click(function() {
            currentDate.setMonth(currentDate.getMonth() - 1);
            renderCalendar(currentDate, $grid, $monthDisplay);
        });
        
        $calendar.find('.next-month').click(function() {
            currentDate.setMonth(currentDate.getMonth() + 1);
            renderCalendar(currentDate, $grid, $monthDisplay);
        });
        
        // Close calendar when clicking outside
        $(document).click(function(e) {
            if (!$calendar.is(e.target) && $calendar.has(e.target).length === 0) {
                $calendar.remove();
            }
        });
    }
    
    function renderCalendar(date, $grid, $monthDisplay) {
        const year = date.getFullYear();
        const month = date.getMonth();
        
        $monthDisplay.text(date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' }));
        
        // Clear previous calendar
        $grid.empty();
        
        // Add day headers
        const dayHeaders = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
        dayHeaders.forEach(day => {
            $grid.append(`<div class="day-header">${day}</div>`);
        });
        
        // Get first day of month and number of days
        const firstDay = new Date(year, month, 1).getDay();
        const daysInMonth = new Date(year, month + 1, 0).getDate();
        
        // Add empty cells for days before month starts
        for (let i = 0; i < firstDay; i++) {
            $grid.append(`<div class="calendar-day empty"></div>`);
        }
        
        // Add days of month
        for (let day = 1; day <= daysInMonth; day++) {
            const dateObj = new Date(year, month, day);
            const dateString = dateObj.toISOString().split('T')[0];
            const isSelected = selectedDates.includes(dateString);
            const isBooked = isDateBooked(dateObj);
            
            const dayHtml = `
                <div class="calendar-day ${isSelected ? 'selected' : ''} ${isBooked ? 'booked' : ''}" 
                     data-date="${dateString}">
                    ${day}
                </div>
            `;
            $grid.append(dayHtml);
        }
        
        // Add event handlers for date selection
        $grid.find('.calendar-day:not(.empty):not(.booked)').click(function() {
            const dateStr = $(this).data('date');
            const $day = $(this);
            
            if ($day.hasClass('selected')) {
                // Remove from selection
                $day.removeClass('selected');
                selectedDates = selectedDates.filter(d => d !== dateStr);
            } else {
                // Add to selection
                $day.addClass('selected');
                selectedDates.push(dateStr);
            }
            
            updateSelectedDatesList($grid);
        });
    }
    
    function updateSelectedDatesList($grid) {
        const $list = $grid.closest('.custom-multi-date-calendar').find('.date-list');
        $list.empty();
        
        selectedDates.sort().forEach(dateStr => {
            const date = new Date(dateStr);
            const dateDisplay = date.toLocaleDateString('en-US', { 
                weekday: 'short', 
                month: 'short', 
                day: 'numeric' 
            });
            $list.append(`<li>${dateDisplay} <span class="remove-date" data-date="${dateStr}">&times;</span></li>`);
        });
        
        // Add remove handlers
        $list.find('.remove-date').click(function() {
            const dateStr = $(this).data('date');
            selectedDates = selectedDates.filter(d => d !== dateStr);
            $(this).parent().remove();
            
            // Update calendar display
            $grid.find(`[data-date="${dateStr}"]`).removeClass('selected');
        });
    }
    
    function isDateBooked(date) {
        // Implement your logic to check if date is booked
        // This could be an API call or check against existing bookings
        return false; // Placeholder implementation
    }
});