calendar-jp

軽量・依存ゼロの日本向け営業カレンダーウィジェット。 店舗・ECサイト向けに 祝日／店舗休業日／EC休業日 をカード型UIで色分け表示します。 ダークモード対応・レスポンシブ（PC 2列 / SP 1列）。

• Vanilla JS のみ（jQuery 等の依存なし）
• 3ファイル計 ≈ 21KB（cal-core.js + cal-init.js + calendar.css、minify前）
• IE11 相当のレガシーブラウザでも動作（var / IIFE 構成）
• ダークモード標準対応（CSS変数ベース）
• 前月/次月ナビゲーション内蔵

---

🎨 デザイン仕様

種別	ライト	ダーク
今日	黒背景 / 白文字・bold	白背景 / 黒文字・bold
祝日	#fff0f0 背景・赤文字（500）	半透明赤 背景・赤文字
店舗休業日	#fff7ed 背景	半透明オレンジ背景
EC休業日	#f0f0ff 背景	半透明紫 背景
日曜	赤文字（#e03535）	同左
土曜	青文字（#2563eb）	同左

• 月カード: border-radius 12px, box-shadow 付き
• 日付セル: 40px × auto, border-radius 8px
• フォント: Noto Sans JP（本文）/ DM Sans（月ラベル）
• レスポンシブ分岐: 720px

---

🚀 クイックスタート

1. ローカルで使う

<!-- フォント（任意ですが推奨） -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&family=DM+Sans:wght@400;700&display=swap" rel="stylesheet">

<!-- calendar-jp -->
<link rel="stylesheet" href="./src/calendar.css">
<div class="calendar"></div>
<script src="./src/cal-core.js"></script>
<script src="./src/cal-init.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () { calendar(); });
</script>

2. CDN で使う（jsDelivr / unpkg）

<!-- jsDelivr -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/calendar-jp@1.0.0/src/calendar.css">
<script src="https://cdn.jsdelivr.net/npm/calendar-jp@1.0.0/src/cal-core.js"></script>

<!-- または unpkg -->
<link rel="stylesheet" href="https://unpkg.com/calendar-jp@1.0.0/src/calendar.css">
<script src="https://unpkg.com/calendar-jp@1.0.0/src/cal-core.js"></script>

<div class="calendar"></div>
<script>
  Calendar.init({
    holidays: ["2026/5/3", "2026/5/4", "2026/5/5"],
    storeClosedDays: ["2026/5/10"],
  });
</script>

3. npm で使う

npm install calendar-jp

---

⚙️ 設定オプション

Calendar.init() または src/cal-init.js で指定します。

オプション	型	デフォルト	説明
targetClass	string	"calendar"	描画先の div の class
displayMonths	number	2	表示月数（1=当月のみ、2=当月+翌月…）
title	string	"営業カレンダー"	ウィジェット左上のタイトル
showTitle	boolean	true	タイトル表示 ON/OFF
showNav	boolean	true	前月/次月ボタン表示
showLegend	boolean	true	凡例表示（1枚目カードの下部のみ）
dark	boolean	false	ダークモード
holidays	string[]	[]	祝日リスト ["YYYY/M/D", ...]
storeClosedDays	string[]	[]	店舗休業日リスト
ecClosedDays	string[]	[]	EC休業日リスト
closedWeekdays	string[]	[]	毎週の定休日（店舗休業扱い）。例: ["Sun", "Wed"]
monthlySpecial	object	{}	毎月特定日に付けるクラス名 { 1: "sale" }
clickUrl	string|null	null	日付クリック時のURL（日付が末尾に付加されます）
clickClass	string|null	null	クリック可能にするクラス名

設定例

Calendar.init({
  displayMonths: 2,

  holidays: [
    "2026/5/3",   // 憲法記念日
    "2026/5/4",   // みどりの日
    "2026/5/5",   // こどもの日
  ],

  storeClosedDays: ["2026/5/10"],
  ecClosedDays:   ["2026/5/15"],

  closedWeekdays: ["Sun"],   // 毎週日曜を休業扱い

  monthlySpecial: {
    1: "openingsale",        // 毎月1日に独自クラスを付与
  },

  dark: false,
});

クラス判定の優先度

today > holiday > ec_closed > store_closed > closedWeekdays > monthlySpecial

---

🎛️ API（ナビゲーション）

初期化後、グローバルな Calendar オブジェクトから表示月をシフトできます。

Calendar.init({ /* ... */ });

Calendar.prev();   // 前月へ1ヶ月シフト
Calendar.next();   // 次月へ1ヶ月シフト
Calendar.reset();  // 今月の表示に戻す

showNav: true の場合、ウィジェット右上のボタンからも操作できます。

---

🌗 ダークモード

方法A: オプション指定

Calendar.init({ dark: true });

方法B: ユーザー切替（トグル）

function toggleTheme() {
  var isDark = document.body.classList.toggle('dark');
  Calendar._cfg.dark = isDark;
  Calendar._render();
}

方法C: OS 設定に追従

var mq = window.matchMedia('(prefers-color-scheme: dark)');
Calendar.init({ dark: mq.matches });
mq.addEventListener('change', function (e) {
  Calendar._cfg.dark = e.matches;
  Calendar._render();
});

---

🎨 CSS カスタマイズ

すべて CSS 変数で上書き可能です。

.caljp {
  --cal-card-radius: 16px;        /* カードの角丸 */
  --cal-cell-radius: 10px;        /* セルの角丸 */
  --cal-cell-height: 44px;        /* セル高さ */
  --cal-holiday-bg: #ffe8e8;      /* 祝日背景色 */
  --cal-store-bg:  #fff1e0;       /* 店舗休業日背景色 */
  --cal-ec-bg:     #ebebff;       /* EC休業日背景色 */
  --cal-sun: #d63030;             /* 日曜文字色 */
  --cal-sat: #1e4fd8;             /* 土曜文字色 */
}

使用可能な CSS クラス一覧

クラス	説明
.caljp	ウィジェットルート
.caljp.dark	ダークモード
.caljp-header	タイトル＋ナビ行
.caljp-title / .caljp-nav / .caljp-btn	ヘッダーパーツ
.caljp-grid	2ヶ月並べるグリッド
.caljp-card	月カード
.caljp-month-header / .caljp-month-label / .caljp-month-year	月タイトル
.caljp-weekday-row / .caljp-weekday	曜日行
.caljp-date-grid / .caljp-cell / .caljp-date	日付グリッド
.caljp-cell.today	今日
.caljp-cell.holiday	祝日
.caljp-cell.store_closed	店舗休業日
.caljp-cell.ec_closed	EC休業日
.caljp-cell.Sun / .Sat 等	曜日別
.caljp-legend / .caljp-legend-item / .caljp-swatch	凡例

---

🔄 動的再描画（SPA / htmx 連携）

DOM が入れ替わるタイミングで再描画が必要な場合：

// htmx
document.body.addEventListener('htmx:afterSwap', function () { calendar(); });

// Turbo (Rails)
document.addEventListener('turbo:load', function () { calendar(); });

---

📦 ファイル構成

calendar/
├── src/
│   ├── cal-core.js    // エンジン本体（編集不要）
│   ├── cal-init.js    // 設定ファイル（ここを編集）
│   └── calendar.css   // スタイル（CSS変数で上書き可）
├── index.html         // デモ
├── README.md
├── LICENSE
└── package.json

---

🖥️ デモ

• ローカル: python3 -m http.server 8000 → http://localhost:8000/
• オンライン: GitHub Pages のデモ （リポジトリ公開後、Settings → Pages で main ブランチを指定）

---

🤝 コントリビュート

バグ報告・機能提案は Issues へお気軽にどうぞ。 Pull Request も歓迎です。

📜 ライセンス

MIT License