内見予約カレンダー選択

<div class="d10-13-09-panel">
          <p class="d10-13-09-title">内見予約 - 空き状況</p>
          <div class="d10-13-09-grid">
            <span class="d10-13-09-cell is-booked">10</span>
            <span class="d10-13-09-cell" data-d="11">11</span>
            <span class="d10-13-09-cell" data-d="12">12</span>
            <span class="d10-13-09-cell is-booked">13</span>
            <span class="d10-13-09-cell" data-d="14">14</span>
            <span class="d10-13-09-cell" data-d="15">15</span>
            <span class="d10-13-09-cell" data-d="16">16</span>
          </div>
          <p class="d10-13-09-status">日付を選択してください</p>
        </div>

.d10-13-09{padding:16px}
        .d10-13-09-panel{width:100%;max-width:280px}
        .d10-13-09-title{margin:0 0 10px;font-size:12px;font-weight:700;color:#334;text-align:center}
        .d10-13-09-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
        .d10-13-09-cell{display:flex;align-items:center;justify-content:center;height:30px;border-radius:6px;background:#eef6ff;color:#2f7fef;font-size:12px;font-weight:700;cursor:pointer;transition:background .15s,color .15s,transform .15s}
        .d10-13-09-cell:hover{background:#dbeaff}
        .d10-13-09-cell.is-booked{background:#f0f1f3;color:#b6bcc3;cursor:not-allowed}
        .d10-13-09-cell.is-selected{background:#2f7fef;color:#fff;transform:scale(1.05)}
        .d10-13-09-status{margin:10px 0 0;font-size:11.5px;color:#667;text-align:center}

(function(){
        var root=document.getElementById('item-10-13-09');if(!root)return;
        var cells=root.querySelectorAll('.d10-13-09-cell:not(.is-booked)');
        var status=root.querySelector('.d10-13-09-status');
        cells.forEach(function(cell){
          cell.addEventListener('click',function(){
            cells.forEach(function(c){c.classList.remove('is-selected');});
            cell.classList.add('is-selected');
            var d=cell.getAttribute('data-d');
            status.textContent='7月'+d+'日 14:00〜 を選択しました';
          });
        });
      })();