技术问询：如何根据服务时长禁用时间段及实现会议室已订时段不可选

Hey Rahul, great questions—let's dive into practical, actionable solutions for your meeting room booking system. I've broken this down into clear steps for both of your asks:

The core logic here is straightforward: any time interval covered by a booked service (of duration N) needs to be marked as unavailable. First, you'll want to define your time granularity (think 15-minute blocks, 30-minute slots, or full hours)—this makes it easier to track and disable overlapping periods.

Here's a step-by-step breakdown:

• First, generate a list of all bookable time blocks for the day. For example, if using 1-hour slots, your list might look like ["09:00", "10:00", "11:00", ..., "17:00"] (each entry represents the start of a 1-hour slot).
• Next, pull all existing bookings for the room. For each booking, calculate the full time range it covers (start time + duration). Then, mark every time block that overlaps with this range as disabled.

For example: If a booking starts at 09:00 with a 2-hour duration, both the 09:00-10:00 and 10:00-11:00 blocks should be locked from selection.

This requires both frontend UI handling and backend validation (never rely solely on frontend checks—they can be bypassed!). Here's how to build it:

Frontend: Visualize Unavailable Slots in Real-Time #

1. Set Up Your Time Selector
   Render all bookable time slots (use buttons, a timeline, or a dropdown—whatever fits your UI). Each slot element should include data attributes for its start time and duration, like:

   <button class="time-slot" data-start="09:00" data-duration="60">09:00 - 10:00</button>
   

2. Fetch Existing Bookings
   On page load, call a backend API to get all booked slots for the room and current day. The response might look like this:

   const bookedSlots = [
     { startTime: "09:00", duration: 120 }, // Covers 09:00-11:00
     { startTime: "14:00", duration: 60 }  // Covers 14:00-15:00
   ];
   

3. Mark Slots as Disabled
   Write a simple function to check for overlapping slots and update the UI:

   // Helper to convert time (HH:MM) to total minutes for easy math
   const timeToMinutes = (timeStr) => {
     const [hours, minutes] = timeStr.split(":").map(Number);
     return hours * 60 + minutes;
   };
   
   // Loop through booked slots and disable overlapping UI elements
   bookedSlots.forEach(booking => {
     const bookingStart = timeToMinutes(booking.startTime);
     const bookingEnd = bookingStart + booking.duration;
   
     document.querySelectorAll(".time-slot").forEach(slot => {
       const slotStart = timeToMinutes(slot.dataset.start);
       const slotEnd = slotStart + parseInt(slot.dataset.duration);
   
       // Check if the current slot overlaps with the booking
       if (slotStart < bookingEnd && slotEnd > bookingStart) {
         slot.classList.add("disabled");
         slot.disabled = true;
       }
     });
   });
   

   Add CSS to make disabled slots obvious:

   .time-slot.disabled {
     background-color: #e5e7eb;
     cursor: not-allowed;
     color: #6b7280;
     pointer-events: none;
   }
   

4. Update UI After New Bookings
   When a user completes a booking, don't refresh the page—just add the new slot to your bookedSlots array and re-run the disable function to update the UI instantly.

Backend: Validate Bookings & Prevent Conflicts #

Frontend checks are for user experience—always validate on the backend to stop invalid bookings from being saved:

• Check for Conflicts Before Saving
  When a booking request comes in, run a database query to see if the requested time overlaps with any existing bookings for the room. Using SQL, that might look like:

  SELECT COUNT(*) FROM meeting_bookings
  WHERE room_id = ?
    AND start_time < ?  -- End time of the new booking
    AND end_time > ?;   -- Start time of the new booking
  

  If the count is greater than 0, return an error (e.g., "This time slot is already booked"). If not, save the new booking to your database.
• Build the Booked Slots API
  Create an endpoint that accepts a room ID and date, then returns all booked time slots for that room on that day. This is what your frontend will use to load initial disabled slots.

Bonus Optimizations #

• Flexible Duration Support: Let users select a duration first, then filter available start times (e.g., if someone picks a 2-hour slot, don't show 17:00 as a start time since it would go beyond your booking window).
• Clear Visual Cues: Beyond disabling, add a distinct background color to booked slots so users can immediately see what's taken.

内容的提问来源于stack exchange，提问作者Rahul Patel