Hear style
Hear style
Etiam lorem ipsum, suspendisse faucibus sed interdum posuere lorem ipsum dolor.
Email
Email
Mobile
Mobile
Instagram
Instagram
TikTok
TikTok
VSCO
VSCO
Massa vitae
Phone
התקשר
Form
הזמן תור
Cancel
Cancel
Appointment Calendar
<
>
Select a Date
Available Time Slots
Morning
Afternoon
Evening
Fill in Your Details
Full Name:
Phone Number:
Email Address:
Submit
// JavaScript remains unchanged const dateList = document.getElementById("date-list"); const selectedDateText = document.getElementById("selected-date"); const morningSlots = document.getElementById("morning-slots"); const afternoonSlots = document.getElementById("afternoon-slots"); const eveningSlots = document.getElementById("evening-slots"); const timeSlotsSection = document.getElementById("time-slots"); const personalInfoSection = document.getElementById("personal-info"); let currentDate = new Date(); // Populate dates for the next 10 days function populateDates() { for (let i = 0; i < 10; i++) { const date = new Date(); date.setDate(currentDate.getDate() + i); const dateString = date.toISOString().split('T')[0]; const dateElement = document.createElement("span"); dateElement.innerText = dateString; dateElement.addEventListener("click", () => { selectedDateText.innerText = `Selected Date: ${dateString}`; loadTimeSlots(dateString); timeSlotsSection.style.display = "block"; document.querySelectorAll(".date-list span").forEach(span => span.classList.remove("selected")); dateElement.classList.add("selected"); }); dateList.appendChild(dateElement); } } // Load time slots for the selected date function loadTimeSlots(date) { // Simulated data - replace with dynamic data from server if needed morningSlots.innerHTML = "
8:00 AM
9:00 AM
10:00 AM
"; afternoonSlots.innerHTML = "
1:00 PM
2:00 PM
3:00 PM
"; eveningSlots.innerHTML = "
6:00 PM
7:00 PM
8:00 PM
"; // Add click event to each slot document.querySelectorAll(".slots span").forEach(slot => { slot.addEventListener("click", () => { timeSlotsSection.style.display = "none"; // Hide time slots personalInfoSection.style.display = "block"; // Show personal info form }); }); } // Initialize calendar populateDates(); // Scroll buttons document.getElementById("prev-day").addEventListener("click", () => { dateList.scrollLeft -= 100; }); document.getElementById("next-day").addEventListener("click", () => { dateList.scrollLeft += 100; }); // Handle form submission document.getElementById("personal-form").addEventListener("submit", (event) => { event.preventDefault(); // Prevent the default form submission const name = document.getElementById("name").value; const phone = document.getElementById("phone").value; const email = document.getElementById("email").value; alert(`Appointment booked!\nName: ${name}\nPhone: ${phone}\nEmail: ${email}`); personalInfoSection.style.display = "none"; // Hide personal info section alert("הפגישה נקבעה בהצלחה!"); });
