Contact Form 7のカレンダーで定休日（特定の曜日）を選べないようにするカスタマイズ

2024年3月12日

大東信仁（ものくろ）

WordPressノウハウ

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

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);
                }
            ]
        });
    });
});

もう一つ、今日当日は選べないように設定している。今日の今日で、予約フォームから問い合わせ来たら、対応があれじゃないですか、はい。