パーツ番号 10-02-05 ・ CSSのみ

空席状況カレンダー

各日に◎○△×の空き記号を色分けで表示。ひと目で予約可能日が分かります。WordPressの宿泊・イベント・レッスンの空席案内に。

bookingcss

プレビュー

ソースコード

HTML

<div class="d10-02-05-cal">
          <div class="d10-02-05-head">2026年 7月 空席状況</div>
          <div class="d10-02-05-days"></div>
          <div class="d10-02-05-legend"><span><i class="d10-02-05-c1">◎</i>余裕</span><span><i class="d10-02-05-c2">○</i>あり</span><span><i class="d10-02-05-c3">△</i>わずか</span><span><i class="d10-02-05-c4">×</i>満</span></div>
        </div>

CSS

.d10-02-05-cal{width:236px;font-size:11px;color:#334155}
        .d10-02-05-head{text-align:center;font-weight:700;margin-bottom:8px;color:#0f172a;font-size:12px}
        .d10-02-05-days{display:grid;grid-template-columns:repeat(7,32px);gap:2px;margin-bottom:10px}
        .d10-02-05-cell{height:32px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:5px;background:#f8fafc;font-size:10px}
        .d10-02-05-cell b{font-size:9px;color:#94a3b8;line-height:1}
        .d10-02-05-cell i{font-style:normal;font-size:12px;line-height:1.4}
        .d10-02-05-c1{color:#16a34a}.d10-02-05-c2{color:#0ea5e9}.d10-02-05-c3{color:#f59e0b}.d10-02-05-c4{color:#ef4444}
        .d10-02-05-legend{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;font-size:10px;color:#64748b}
        .d10-02-05-legend span{display:flex;align-items:center;gap:2px}
        .d10-02-05-legend i{font-style:normal;font-size:12px}

JavaScript

(function(){
        var root=document.querySelector('#item-10-02-05 .d10-02-05-days');
        if(!root)return;
        var marks=['◎','○','△','×'],cls=['d10-02-05-c1','d10-02-05-c2','d10-02-05-c3','d10-02-05-c4'];
        var pat=[0,1,2,3,1,0,2,3,0,1,2,0,3,1,0,2,1,0,3,2,0,1,2,3,0,1,0,2,3,1,0];
        for(var d=1;d<=31;d++){
          var m=pat[d-1];
          var c=document.createElement('div');c.className='d10-02-05-cell';
          c.innerHTML='<b>'+d+'</b><i class="'+cls[m]+'">'+marks[m]+'</i>';
          root.appendChild(c);
        }
      })();

クラス名 .d10-02-05 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。