月切替カレンダー

<div class="d10-02-09-cal">
          <div class="d10-02-09-bar">
            <button class="d10-02-09-nav" data-dir="-1">◀</button>
            <span class="d10-02-09-title">2026年 7月</span>
            <button class="d10-02-09-nav" data-dir="1">▶</button>
          </div>
          <div class="d10-02-09-week"><span>日</span><span>月</span><span>火</span><span>水</span><span>木</span><span>金</span><span>土</span></div>
          <div class="d10-02-09-days"></div>
        </div>

.d10-02-09-cal{width:230px;font-size:12px;color:#334155}
        .d10-02-09-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
        .d10-02-09-title{font-weight:700;color:#0f172a}
        .d10-02-09-nav{width:26px;height:26px;border:1px solid #cbd5e1;background:#fff;border-radius:6px;cursor:pointer;color:#475569;font-size:11px}
        .d10-02-09-nav:hover{background:#eef2ff;border-color:#6366f1;color:#6366f1}
        .d10-02-09-week{display:grid;grid-template-columns:repeat(7,28px);gap:2px;margin-bottom:4px}
        .d10-02-09-week span{width:28px;height:20px;display:flex;align-items:center;justify-content:center;font-size:11px;color:#94a3b8}
        .d10-02-09-days{display:grid;grid-template-columns:repeat(7,28px);gap:2px}
        .d10-02-09-day{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;font-size:11px}
        .d10-02-09-day:hover{background:#e0e7ff}
        .d10-02-09-empty{visibility:hidden}

(function(){
        var cal=document.querySelector('#item-10-02-09 .d10-02-09-cal');
        if(!cal)return;
        var months=[
          {name:'2026年 7月',first:3,total:31},
          {name:'2026年 8月',first:6,total:31}
        ];
        var cur=0;
        var title=cal.querySelector('.d10-02-09-title');
        var days=cal.querySelector('.d10-02-09-days');
        function render(){
          var m=months[cur];title.textContent=m.name;days.innerHTML='';
          for(var i=0;i<m.first;i++){var e=document.createElement('div');e.className='d10-02-09-day d10-02-09-empty';days.appendChild(e);}
          for(var d=1;d<=m.total;d++){var c=document.createElement('div');c.className='d10-02-09-day';c.textContent=d;days.appendChild(c);}
        }
        cal.querySelectorAll('.d10-02-09-nav').forEach(function(b){
          b.addEventListener('click',function(){
            var dir=parseInt(this.getAttribute('data-dir'),10);
            cur=(cur+dir+months.length)%months.length;render();
          });
        });
        render();
      })();