Calendrier Avec Sélection De Dates Et Disponibilité Des Vols

Hello,

J’ai besoin d’un expert en JavaScript. Actuellement, j’ai un flux JSON sur chaque calendrier qui vérifie si la disponibilité est supérieure à 0. Si c’est le cas, la case est colorée en bleu. Pour chaque calendrier, j’ai défini un code pour l’aéroport de départ (« departureAirportCode ») et un code pour l’aéroport d’arrivée (« arrivalAirportCode ») pour aller chercher le flux JSON du vol (https://preprod4.ttinteractive.com/Zenith/FrontOffice/LaCompagnie/BookingEngine/GetAvailabilitySummary?departureAirportCode=${departureAirportCode}&arrivalAirportCode=${arrivalAirportCode}&startDate=2024-10-01&endDate=2024-10-30&prbdCodes=V,N,X)

Cependant, la cliente souhaite que l’on puisse sélectionné dans chaque dropdown afin de changer la ville de départ et la ville de retour. J’ai attribué une valeur à chaque choix. Par exemple, si l’on sélectionne Orly, le code « ORY » est utilisé pour le « departureAirportCode ». Dans ce cas, le « arrivalAirportCode » doit automatiquement être défini sur « ERW ». De même, lorsqu’on sélectionne New York, cela doit automatiquement mettre « arrivalAirportCode » à ORY .

Merci !

<!-- Div où le calendrier sera affiché -->
<div id='calendar'></div>
<div id='calendar2'></div>




   <script>
           document.addEventListener('DOMContentLoaded', function() {
            var selectedDate1 = null;
            var selectedDate2 = null;

            var calendar1 = initializeCalendar('calendar', 'ORY', 'EWR', function(date) {
                selectedDate1 = date;
                updateSelectedDates();
            });

            var calendar2 = initializeCalendar('calendar2', 'EWR', 'ORY', function(date) {
                selectedDate2 = date;
                updateSelectedDates();
            });

            var bookingButton = document.getElementById('bookingButton');
            
            if (bookingButton) {
                bookingButton.addEventListener('click', function(event) {
                    event.preventDefault();
                    if (selectedDate1 && selectedDate2) {
                        const url = buildBookingURL(selectedDate1, selectedDate2);
                        window.location.href = url;
                    } else {
                        alert('Veuillez sélectionner les dates de départ et de retour.');
                    }
                });
            } else {
                console.error("Le bouton de réservation n'a pas été trouvé dans le DOM.");
            }

            function initializeCalendar(elementId, departureAirportCode, arrivalAirportCode, onDateSelect) {
                var calendarEl = document.getElementById(elementId);

                var calendar = new FullCalendar.Calendar(calendarEl, {
                    initialView: 'dayGridMonth',
                    selectable: true,
                    unselectAuto: false,
                    selectMirror: true,
                    firstDay: 1,
                    locale: 'fr',
                    dayHeaderFormat: { weekday: 'narrow' },
                    headerToolbar: {
                        left: 'prev',
                        center: 'title',
                        right: 'next'
                    },
                    height: 'auto',
                     longPressDelay: 1,
                    dateClick: function(info) {
                        handleDateSelection(info.date, calendar);
                        onDateSelect(info.date);
                    },
                    datesSet: function() {
                        updateSelectedDateDisplay(calendar);
                    },
                    touchstart: function(info) {
                        handleDateSelection(info.date, calendar);
                        onDateSelect(info.date);
                    }
                });

                function handleDateSelection(date, calendar) {
                    clearSelectedDate(calendar);
                    updateSelectedDateDisplay(calendar, date);
                }

                function clearSelectedDate(calendar) {
                    calendar.el.querySelectorAll('.selected-date').forEach(el => {
                        el.classList.remove('selected-date');
                    });
                }

                function updateSelectedDateDisplay(calendar, date) {
                    if (date) {
                        var dateElement = calendar.el.querySelector('.fc-day[data-date="' + date.toISOString().split('T')[0] + '"]');
                        if (dateElement) {
                            dateElement.classList.add('selected-date');
                        }
                    }
                }

                calendar.render();
                fetchFlightsAndColorCalendar(calendar, departureAirportCode, arrivalAirportCode);

                return calendar;
            }

            function fetchFlightsAndColorCalendar(calendar, departureAirportCode, arrivalAirportCode) {
                const url = `<a target="_blank" rel="noopener noreferrer" href="https://preprod4.ttinteractive.com/Zenith/FrontOffice/LaCompagnie/BookingEngine/GetAvailabilitySummary?departureAirportCode=${departureAirportCode}&arrivalAirportCode=${arrivalAirportCode}&startDate=2024-10-01&endDate=2024-10-30&prbdCodes=V,N,X">https://preprod4.ttinteractive.com/Zenith/FrontOffice/LaCompagnie/BookingEngine/GetAvailabilitySummary?departureAirportCode=${departureAirportCode}&arrivalAirportCode=${arrivalAirportCode}&startDate=2024-10-01&endDate=2024-10-30&prbdCodes=V,N,X</a>`;
                fetch(url)
                    .then(response => response.json())
                    .then(data => {
                        colorCalendarDays(data, calendar);
                    })
                    .catch(error => console.error('Erreur lors de la récupération des données:', error));
            }

            function colorCalendarDays(data, calendar) {
                const availableDates = data.Response.Days
                    .filter(item => item.Availability > 0)
                    .map(item => ({
                        start: item.Date.split('T')[0],
                        display: 'background',
                        backgroundColor: getColorByAvailability(item.Availability),
                        classNames: ['tarif-promo']
                    }));
                calendar.removeAllEvents();
                calendar.addEventSource({ events: availableDates });
            }

            function getColorByAvailability(availability) {
                return availability > 0 ? '#99BFE1' : 'white';
            }

            function updateSelectedDates() {
                console.log('Dates sélectionnées:');
                console.log('Calendrier 1 (Départ):', selectedDate1 ? formatDate(selectedDate1) : 'Aucune date sélectionnée');
                console.log('Calendrier 2 (Retour):', selectedDate2 ? formatDate(selectedDate2) : 'Aucune date sélectionnée');
                
                if (bookingButton) {
                    if (selectedDate1 && selectedDate2) {
                        bookingButton.disabled = false;
                    } else {
                        bookingButton.disabled = true;
                    }
                }
            }

            function buildBookingURL(outboundDate, inboundDate) {
                const baseUrl = '<a target="_blank" rel="noopener noreferrer" href="https://fo-emea.ttinteractive.com/Zenith/FrontOffice/LaCompagnie/fr-FR/BookingEngine/SearchResult">https://fo-emea.ttinteractive.com/Zenith/FrontOffice/LaCompagnie/fr-FR/BookingEngine/SearchResult</a>';
                const params = new URLSearchParams({
                    OutboundDate: formatDate(outboundDate),
                    InboundDate: formatDate(inboundDate),
                    OriginAirportCode: 'ORY',
                    DestinationAirportCode: 'EWR',
                    Currency: 'EUR'
                });

                // Ajouter les informations des voyageurs
                const travelers = [
                    {key: 'AD', index:0, value: document.getElementById('adulte').value},
                    {key: 'CHD', index:1, value: document.getElementById('enfant').value},
                    {key: 'INF', index:2, value: document.getElementById('bebe').value},
                ];

                travelers.forEach((traveler, index) => {
                    if (traveler.value > 0) {
                        params.append(`TravelerTypes[${index}].Key`, traveler.key);
                        params.append(`TravelerTypes[${index}].Value`, traveler.value);
                    }
                });

                return `${baseUrl}?${params.toString()}`;
            }

            function formatDate(date) {
                const d = new Date(date);
                d.setMinutes(d.getMinutes() - d.getTimezoneOffset());
                return d.toISOString().split('T')[0];
            }
        });
    </script>