大東 信仁（ものくろ） 
Contact Form 7はWordPressで最も利用されているコンタクトフォームのプラグイン。
カレンダーを使って日付の入力ができるけど、定休日や特定の曜日を選べない機能を持っていない。（この日より以前、以降、何日飛ばしで、というのは対応してるけど、特定の曜日を除くオプションがない）
この記事は、Contact Form 7のカレンダーで定休日や特定の曜日を選択できないように、動作確認済みのJavaScriptでカスタマイズするコードを紹介する。
カスタマイズには、functions.phpとJavaScriptのコードを追加する作業が必要になる。早速、コードを紹介する。
このカスタマイズは、標準のカレンダーでなく、Flatpickrという軽量なJavaScriptのカレンダーライブラリーを使っている。
functions.php
このコードは、reserve というスラッグ（example.com/reserve/）を持っているお問い合わせページのときに、必要なコードを読みこむコードになっている。
なので、2行目の reserve を実際のサイトに合わせて変更が必要になる。
function custom_calendar_enqueue_scripts() {
if ( is_page('reserve') ) {
wp_enqueue_script('calendar_custom_js', get_stylesheet_directory_uri() . '/js/calendar_custom.js', array(), '', true);
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);
}
}
add_action('wp_enqueue_scripts', 'custom_calendar_enqueue_scripts');JavaScriptの配置はこんな構成にしている
子テーマ
functions.php
js
calendar_custom.js
calendar_custom.js
このコードでは、火曜日が定休日の設定になっている。
曜日の設定は、コードのコメントで 火曜日を無効にするの次の行にある
return (date.getDay() === 2);ここで設定している。なお、日曜日が0からスタートして、土曜日が6に（だから火曜日は 2）になるので、ここの値を変更すれば、曜日は変更できる。
document.addEventListener('DOMContentLoaded', function() {
// 日本語ロケールを読み込む
var Japanese = flatpickr.l10ns.ja;
var inputs = document.querySelectorAll('input.wpcf7-date');
inputs.forEach(function(input) {
flatpickr(input, {
altInput: true,
altFormat: "F j, Y",
dateFormat: "Y-m-d",
locale: Japanese, // カレンダーを日本語表記にする
minDate: "today", // 今日を含む過去の日付を選択不可にする
disable: [
function(date) {
// 火曜日を無効にする
return (date.getDay() === 2);
}
]
});
});
});
もう一つ、今日 当日は選べないように設定している。今日の今日で、予約フォームから問い合わせ来たら、対応があれじゃないですか、はい。
本音の部分
定休日にご予約をいただくと、お断りのご連絡となってしまって、お店側も手間（コスト）になるし、お客様にとっても「なら事前にそう言ってよ」とご迷惑をお掛けするので、ビジネスの実態に合わせた予約フォームにすることが大切なポイントだし、お店の手間を減らし、お客様にも喜んでもらえて、みんな幸せになれる。
カスタマイズはテクニカルな知識をネットから色々と調べる必要があるが、ChatGPT-4を活用することで、カスタマイズのコーディングのプロセスを大幅に短縮できた。
