📅 SVGカレンダー - 使い方ガイド

🎯 主な機能

🚀 基本的な使い方

1. カレンダーの直接表示

  • ブラウザで https://svg-calendar.com/calendar にアクセス
  • 現在の月のカレンダーが表示されます
  • カレンダーの例

    カレンダー例

    2. 月の切り替え(ページ表示機能)

  • ブラウザで https://svg-calendar.com/page/ にアクセス
  • カレンダーページの「前月」または「次月」ボタンをクリック
  • URLで直接指定することも可能: /page/202508
  • 3. 過去の日付の斜線表示(オプション機能)

  • 過去の日付に斜線を表示したい場合は、URLに /lines を追加
  • 例: /calendar/202508/lines でHTMLページ表示
  • 斜線が引かれたカレンダーが表示されます
  • 過去日付斜線入り版の例

    カレンダー例

    4. 色のカスタマイズ(オプション機能)

  • URLに ?bgcolor=色コード を追加
  • 例: /calendar/202508?bgcolor=0000ff (斜線なし、青色) /calendar/202508/lines?bgcolor=ff0000 (斜線あり、赤色)
  • 色コードは6桁の16進数で指定(#は不要)
  • ヘッダー色をカスタマイズしたカレンダーの例(斜線あり・赤色)

    カレンダー例

    🔧 仕様

    画像の直接表示

    GET /calendar/{yyyymm}

    通常のカレンダー(斜線なし)を表示

    GET /calendar/202508
    GET /calendar/{yyyymm}/lines

    過去の日付に斜線が引かれたカレンダーを表示

    GET /calendar/202508/lines
    GET /calendar/{yyyymm}/lines?bgcolor={color}

    ヘッダー色をカスタマイズしたカレンダーを表示

    GET /calendar/202508/lines?bgcolor=ff0000

    📱 HTMLページの表示

    GET /page/{yyyymm}

    ナビゲーション付きのHTMLページでカレンダーを表示(斜線付き)

    GET /page/202508

    🎨 色のカスタマイズ例

    パラメーターに ?bgcolor=色コード を追加することで、色をカスタマイズできます。

    よく使われる色コード

    🔍 特殊機能

    動的ファビコン

    GET /favicon.ico

    今日の日付が表示された動的ファビコンを表示。タブにも表示されます。→ ファビコン

    💡 使用例

    Webサイトへの埋め込み

    <img src="https://svg-calendar.com/calendar/202508/lines?bgcolor=ff0000" alt="2024年12月カレンダー" style="max-width: 100%; height: auto;">

    iframeでの表示

    <iframe src="https://svg-calendar.com/page/202508" width="800" height="600" frameborder="0"></iframe>

    ⚠️ 注意事項