プロジェクト概要

クリニックの営業日・担当医スケジュールをWebサイト上でわかりやすく表示するための、WordPress専用カレンダープラグインをフルスクラッチで開発しました。管理画面から曜日ごとの基本設定や特別日程を直感的に管理でき、フロント側ではAjax月遷移やスマートフォン最適化など、来院者にとって使いやすいUIを実現しています。

開発した主な機能

曜日別スケジュール基本設定

管理画面の設定ページから、曜日ごとに「休診日」「営業時間」「担当医・イベント」を一括設定できます。イベントはカラーピッカーで背景色を個別指定でき、複数の担当枠を追加・削除する動的UIも実装しました。設定した内容は月間カレンダーの各セルに自動反映されます。

特別日程管理(カスタム投稿タイプ)

祝日の休診、臨時の営業時間変更、特別イベントの3パターンを「特別日程」カスタム投稿タイプで管理します。特別イベント(★マーク)はクリックするとモーダルウィンドウが開き、画像付きの詳細情報をAjaxで取得・表示します。営業時間の一部変更では、担当医やイベントテキストをHTMLタグ付きで柔軟にカスタマイズ可能です。

祝日・時短営業の一括設定

年間の祝日や年末年始の休診日を、テキストエリアに日付を改行入力するだけで一括登録できる仕組みを実装しました。時短営業日についても同様に日付一覧と営業時間を設定でき、通常の曜日設定を上書きする優先度制御(基本設定 → 時短一括 → 休診一括 → 個別設定)を組み込んでいます。

Ajaxカレンダー月遷移

前月・翌月の切り替えはページ遷移なしのAjax通信で実現。過去月へのナビゲーションは自動的に無効化し、nonce検証によるセキュリティ対策も施しています。遷移後のイベントバインドやスマホ表示の再初期化など、動的HTML差し替え時の整合性も考慮した設計です。

スマートフォン最適化(週間表示・アコーディオンUI)

768px以下のスマートフォン表示では、月間カレンダーを「週間表示」に自動切替。ナビゲーションボタンは「前週/次週」に変わり、月をまたぐ週遷移もシームレスに動作します。さらに、各曜日セルをタップすると該当列だけが展開する「アコーディオンカラム」を実装し、限られた画面幅でも営業時間や担当医情報を視認しやすくしています。

その他の実装

カレンダー下部のお知らせメッセージ(管理画面から自由編集)、休診日の斜め線マーク表示、祝日・土曜・日曜の色分け、当日セルのハイライト、カラーコード指定によるイベント背景色のカスタマイズなど、細かな運用ニーズに対応する機能を盛り込んでいます。