期間選択(範囲ハイライト)

<div class="d10-02-10-cal">
          <div class="d10-02-10-head">2026年 7月 <span class="d10-02-10-hint">開始日と終了日をクリック</span></div>
          <div class="d10-02-10-days"></div>
        </div>

.d10-02-10-cal{width:230px;font-size:12px;color:#334155}
        .d10-02-10-head{font-weight:700;color:#0f172a;margin-bottom:8px;font-size:12px}
        .d10-02-10-hint{display:block;font-weight:400;font-size:10px;color:#94a3b8;margin-top:2px}
        .d10-02-10-days{display:grid;grid-template-columns:repeat(7,28px);gap:2px 0}
        .d10-02-10-day{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:11px;cursor:pointer;position:relative;z-index:1}
        .d10-02-10-day:hover{color:#0d9488;font-weight:700}
        .d10-02-10-empty{visibility:hidden;cursor:default}
        .d10-02-10-in{background:#ccfbf1}
        .d10-02-10-edge{background:#14b8a6;color:#fff;font-weight:700;border-radius:6px;position:relative;z-index:2}

(function(){
        var cal=document.querySelector('#item-10-02-10 .d10-02-10-cal');
        if(!cal)return;
        var days=cal.querySelector('.d10-02-10-days');
        var first=3,total=31,start=null,end=null;
        for(var i=0;i<first;i++){var e=document.createElement('div');e.className='d10-02-10-day d10-02-10-empty';days.appendChild(e);}
        var cells=[];
        for(var d=1;d<=total;d++){
          var c=document.createElement('div');c.className='d10-02-10-day';c.textContent=d;c.dataset.d=d;
          cells.push(c);days.appendChild(c);
          c.addEventListener('click',function(){
            var v=parseInt(this.dataset.d,10);
            if(start===null||end!==null){start=v;end=null;}
            else if(v<start){end=start;start=v;}
            else{end=v;}
            paint();
          });
        }
        function paint(){
          cells.forEach(function(c){
            var v=parseInt(c.dataset.d,10);
            c.className='d10-02-10-day';
            if(end!==null&&v>start&&v<end)c.classList.add('d10-02-10-in');
            if(v===start||(end!==null&&v===end))c.classList.add('d10-02-10-edge');
          });
        }
      })();