Contact Form 7のカレンダーで「定休日を除外したい」ニーズとは？
飲食店や美容院、整体など、店舗型ビジネスの問い合わせフォームでは、カレンダー形式での予約日選択が求められることが多くなっています。
しかし、ここで課題になるのが「定休日を選ばせたくない」というニーズです。
ユーザーが定休日に予約を入れてしまうと、店舗側は個別に対応・謝罪する必要があり、業務負担が増えるだけでなく、ユーザー体験も損なわれてしまいます。
- 美容室の定休日である「毎週火曜」に予約が入ってしまった
- 臨時休業日にイベント予約が殺到し、後から全員にお断りの連絡を入れる羽目に…
- 定休日の設定がフォームに反映されておらず、混乱を招いた
このようなトラブルを防ぐためにも、フォーム上であらかじめ定休日をカレンダーから除外しておきましょう。
ところが、Contact Form 7は標準では特定の曜日や祝日を除外する機能が備わっていません。
そのため、「定休日の除外」はJavaScriptなどを用いたカスタマイズによって実装する必要があります。
本記事では、こうした現場のニーズに応える形で、「特定の曜日（定休日）を除外する」だけでなく、「受付期間を投稿に応じて動的に変える」といった実用的な実装手法を紹介していきます。
定休日除外＆期間制限付きのカレンダー
まずは、今回ご紹介するカスタマイズで実現できる完成イメージです。
- Contact Form 7のフォーム上に、日付選択用の**カレンダー（Flatpickr）**が表示される
- 定休日（たとえば毎週火水曜）はカレンダー上で選択不可になっている
- 投稿編集画面で設定した「受付開始日〜受付終了日」の範囲内だけがカレンダーに表示される
- 当日以前の日付は自動的に無効化され、選択できないようになっている
これにより、ユーザーは予約可能な日だけを迷わず選択できるようになります。
一方、管理者側も投稿ごとに受付期間を設定できるため、キャンペーンや期間限定イベントなどへの柔軟な対応が可能です。
また、Flatpickrを使うことでカレンダーのUIも非常にスマートに表示されるため、見た目の洗練さや操作性の高さもポイントとなります。
導入手順① Flatpickrの読み込みとスタイル設定
まずは、カレンダーライブラリであるFlatpickrをWordPressのサイトに読み込む準備をします。
Flatpickrは軽量で表示も美しく、多言語対応にも優れているため、Contact Form 7のカレンダー機能にぴったりです。
functions.phpに記述するコード
WordPressのテーマ（または子テーマ）のfunctions.phpに以下のコードを追加してください。
function custom_calendar_enqueue_scripts() {
if ( is_page('reserve') ) { // reserveページ限定で読み込む（適宜変更）
wp_enqueue_style('flatpickr-style', 'https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css');
wp_enqueue_script('flatpickr-script', 'https://cdn.jsdelivr.net/npm/flatpickr', array(), '', true);
wp_enqueue_script('flatpickr-japanese', 'https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js', array('flatpickr-script'), '', true);
wp_enqueue_script('calendar-custom', get_stylesheet_directory_uri() . '/js/calendar_custom.js', array(), '', true);
}
}
add_action('wp_enqueue_scripts', 'custom_calendar_enqueue_scripts');このコードで、対象ページにだけFlatpickrとその日本語ロケールが読み込まれ、calendar_custom.jsに記述されたJavaScriptが有効になります。
is_page('reserve')の部分は、カレンダーを表示したい固定ページのスラッグに合わせて変更してください。
導入手順② SCFで受付期間（開始日／終了日）を設定
続いて、SCF（Smart Custom Fields）というプラグインを使って、投稿ごとに予約受付期間を設定できるようにします。
SCFで日付フィールドを作成
- WordPress管理画面 → [SCF] → 新規フィールドグループ作成
- グループ名例：「イベント予約受付期間」
- 以下の表のようなフィールドを2つ作成
- 投稿タイプに「投稿」または「カスタム投稿（例：event）」を割り当てて保存
| フィールドラベル | フィールド名 | フィールドタイプ | 表示形式 | 戻り値の形式 |
|---|---|---|---|---|
| 受付開始日 | event_start_date | 日付選択ツール（datepicker） | Y/m/d | Y/m/d |
| 受付終了日 | event_end_date | 日付選択ツール（datepicker） | Y/m/d | Y/m/d |
これで、各投稿に受付開始日・終了日を設定できるようになります。
Smart Custom Fieldsは、管理画面でもカレンダー表示で入力できるため、使い勝手が非常に良いです。
導入手順③ Contact Form 7にカレンダー入力欄を設置
次に、Contact Form 7のフォーム内にカレンダーから日付を選べる入力欄を設置します。
フォームタグの記述例
<label> ご希望日（定休日：水曜を除く）
[text* date-calendar class:datepicker placeholder "日付をお選びください"]
</label>text*：必須項目にする（任意）class:datepicker：Flatpickrを適用させるためのクラス名（後ほどJSで対象に）placeholder：未入力時に表示するヒント
ここでは一見、ただのテキスト入力のようですが、後述するJavaScriptにより、クリックでカレンダーが開くフィールドへと変化します。
導入手順④ JavaScriptでカレンダーの表示制御
次に、Contact Form 7のカレンダー入力フィールドに対して、定休日除外と受付期間の動的制御を行うJavaScriptを記述します。
ここでは、先ほど読み込んだcalendar_custom.jsにコードを記述します。
※calendar_custom.jsは、/wp-content/themes/your-child-theme/js/のような場所に作成しておくと管理しやすいです。
calendar_custom.js の内容（Flatpickr＋定休日＋受付期間）
document.addEventListener('DOMContentLoaded', function () {
// 日本語ロケールを設定
var Japanese = flatpickr.l10ns.ja;
// フォーム内の class="datepicker" に対して適用
var inputs = document.querySelectorAll('input.datepicker');
inputs.forEach(function (input) {
// PHPから埋め込まれた受付開始日・終了日を取得（scriptタグで埋め込む）
var startDate = input.dataset.start; // 例：2024-07-01
var endDate = input.dataset.end; // 例：2024-07-31
flatpickr(input, {
altInput: true,
altFormat: "Y年m月d日",
dateFormat: "Y-m-d",
locale: Japanese,
minDate: "today",
maxDate: endDate || null,
disable: [
function (date) {
// 水曜日を定休日として除外（0=日,1=月,2=火,3=水...）
return date.getDay() === 3;
}
],
onReady: function (selectedDates, dateStr, instance) {
// 受付開始日が未来日の場合、それを minDate に設定
if (startDate) {
var today = new Date();
var start = new Date(startDate);
if (start > today) {
instance.set('minDate', startDate);
}
}
}
});
});
});【補足】SCFで設定した日付をHTMLに渡す方法（PHP側）
先ほどのJavaScriptが正しく動作するには、SCFで設定した受付開始日・終了日をHTML側に出力しておく必要があります。
例えば、該当のテンプレートファイル（例：single-event.phpやpage-reserve.phpなど）に次のようなコードを追加します
<?php
$start_date = get_field('event_start_date'); // SCFで設定したフィールド名
$end_date = get_field('event_end_date');
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
var input = document.querySelector('input[name="date-calendar"]');
if (input) {
input.setAttribute('data-start', '<?php echo esc_attr($start_date); ?>');
input.setAttribute('data-end', '<?php echo esc_attr($end_date); ?>');
}
});
</script>これにより、フォームの入力欄にdata-startおよびdata-end属性が付き、JavaScript側から受付期間を取得できるようになります。
実装確認と応用カスタマイズのヒント
ここまで設定が完了したら、次の手順で動作確認を行いましょう。
- 投稿や固定ページの編集画面で「受付開始日」「受付終了日」をカレンダーから入力
- 定休日（例：火・水曜）以外で、期間内の日付を設定する
- フォームの日付欄にカレンダーが表示されるか
- 定休日はクリックできないか（灰色や無反応でOK）
- 今日以前の日付が選べないか
- 開始日が未来日の場合、選択肢が正しく制限されているか
応用カスタマイズのアイデア
複数の定休日を除外したい場合
date.getDay()で複数条件を追加すれば対応可能（例：月曜と水曜を除外）
disable: [
function(date) {
return [1, 3].includes(date.getDay()); // 月曜・水曜
}
]祝日や特定日を除外したい場合
JavaScriptの配列に指定日を追加して、disableに渡す方法もあります。
フォームの種類ごとに受付可能日を変える
複数のSCFフィールド or ページごとの条件分岐で制御可能です。
まとめ｜定休日＆動的受付期間でフォームの質をアップしよう
Contact Form 7は非常に柔軟なフォームプラグインですが、日付制限や定休日の除外といった機能は、追加のJavaScriptカスタマイズで実現する必要があります。
本記事で紹介したように、
- Flatpickrを活用したスタイリッシュなカレンダーUI
- SCFとの連携による投稿ごとの受付期間設定
- 定休日や過去日をカレンダーから除外するスマートなバリデーション
これらを組み合わせることで、ユーザーにとっても管理者にとっても、ストレスのない予約体験が提供できます。
制作案件や自社サイトのフォーム改善のヒントとして、ぜひ活用してみてください！
コメント