ミニカレンダー(月表示)

<div class="d10-02-01-cal">
          <div class="d10-02-01-head">2026年 7月</div>
          <div class="d10-02-01-week"><span>日</span><span>月</span><span>火</span><span>水</span><span>木</span><span>金</span><span>土</span></div>
          <div class="d10-02-01-days"></div>
        </div>

.d10-02-01-cal{width:230px;font-size:12px;color:#334155}
        .d10-02-01-head{text-align:center;font-weight:700;margin-bottom:8px;color:#0f172a}
        .d10-02-01-week{display:grid;grid-template-columns:repeat(7,28px);gap:2px;margin-bottom:4px}
        .d10-02-01-week span{width:28px;height:20px;display:flex;align-items:center;justify-content:center;font-size:11px;color:#94a3b8}
        .d10-02-01-days{display:grid;grid-template-columns:repeat(7,28px);gap:2px}
        .d10-02-01-day{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;cursor:pointer;transition:background .15s}
        .d10-02-01-day:hover{background:#e0e7ff}
        .d10-02-01-empty{visibility:hidden}
        .d10-02-01-today{background:#6366f1;color:#fff;font-weight:700}
        .d10-02-01-sel{outline:2px solid #6366f1;background:#c7d2fe;color:#3730a3}

(function(){
        var root=document.querySelector('#item-10-02-01 .d10-02-01-days');
        if(!root)return;
        var firstDay=3; /* 2026-07-01 は水曜(固定値) */
        var total=31, today=4;
        for(var i=0;i<firstDay;i++){var e=document.createElement('div');e.className='d10-02-01-day d10-02-01-empty';root.appendChild(e);}
        for(var d=1;d<=total;d++){
          var c=document.createElement('div');c.className='d10-02-01-day';c.textContent=d;
          if(d===today)c.classList.add('d10-02-01-today');
          c.addEventListener('click',function(){
            var s=root.querySelector('.d10-02-01-sel');if(s)s.classList.remove('d10-02-01-sel');
            this.classList.add('d10-02-01-sel');
          });
          root.appendChild(c);
        }
      })();