Scheduling tools like Calendly are built using time-slot grids. Here’s a clean implementation combining a calendar with a time-picker list.

The Time Logic

const times = ["09:00 AM", "10:30 AM", "01:00 PM", "03:30 PM"];

function renderTimes(selectedDate) {
  const container = document.getElementById('time-slots');
  container.innerHTML = '';
  
  times.forEach(t => {
    const btn = document.createElement('button');
    btn.className = 'time-btn';
    btn.innerText = t;
    container.appendChild(btn);
  });
}

Check out the Live Demo. Selecting a day physically animates and generates the available hour slots!