Contact Form 7のカレンダーで特定の曜日や日本の祝日を選択不可にする方法

「Contact Form 7 のカレンダーで、日曜や祝日は選択できないようにしたい！」
そんな要望に応えるための手順を、flatpickrというカレンダーライブラリを使って実装する方法をご紹介します。

この記事の内容

Contact Form 7 にflatpickrを導入する方法
カレンダーで選択できる日付を制限する方法
日本の祝日を自動で取得し、選択不可にする方法
コピペでそのまま使えるコード付き

flatpickrとは？

flatpickrは、軽量でカスタマイズ性の高いJavaScript製のカレンダーUIライブラリです。
Contact Form 7の標準機能では制限できない「特定の曜日」や「祝日」の無効化も、flatpickrを使えば柔軟に対応できます。

導入手順

① flatpickrを読み込む

まずはWordPressの functions.php に以下のコードを追加します：

PHP

function my_enqueue_flatpickr() {
    // flatpickrのCSS
    wp_enqueue_style('flatpickr-css', 'https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css');

    // flatpickrの日本語ロケール
    wp_enqueue_script('flatpickr-locale-ja', 'https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/ja.js', array(), null, true);

    // flatpickr本体
    wp_enqueue_script('flatpickr-js', 'https://cdn.jsdelivr.net/npm/flatpickr', array('jquery'), null, true);

    // flatpickr初期化用のカスタムスクリプト
    wp_enqueue_script('flatpickr-init', get_template_directory_uri() . '/js/flatpickr-init.js', array('flatpickr-js'), null, true);
}
add_action('wp_enqueue_scripts', 'my_enqueue_flatpickr');

flatpickr-init.js という初期化用のJavaScriptファイルを /js/ フォルダ内に作成してください。

② Contact Form 7 側の設定

Contact Form 7 の日付フィールドに、flatpickrを適用するためのクラスを追加します：

PHP

[date* your-date class:wpcf7-date id:date-selection1]

③ flatpickrの初期化と祝日取得のスクリプト

flatpickr-init.js に以下のコードを貼り付けてください。
このコードは下記の条件を設定しています。

日曜、月曜、火曜は選択不可
第2・第4金曜日は選択不可
日本の祝日は選択不可
日本語カレンダー対応（年・月・曜日など）

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    const Japanese = flatpickr.l10ns.ja;
    const holidayApi = "https://holidays-jp.github.io/api/v1/date.json";
    let holidays = [];

    fetch(holidayApi)
        .then(response => response.json())
        .then(data => {
            holidays = Object.keys(data).map(dateStr => {
                const [year, month, day] = dateStr.split("-");
                return new Date(year, month - 1, day);
            });

            initFlatpickr(); // カレンダー初期化
        });

    function initFlatpickr() {
        const inputs = document.querySelectorAll('input.wpcf7-date');

        inputs.forEach(function(input) {
            flatpickr(input, {
                altInput: true,
                altFormat: "Y年m月d日",
                dateFormat: "Y-m-d",
                locale: Japanese,
                minDate: "today",
                disable: [
                    function(date) {
                        const day = date.getDay();

                        // 日曜、月曜、火曜を無効
                        if ([0, 1, 2].includes(day)) return true;

                        // 第二・第四金曜日を無効
                        if (day === 5) {
                            const d = date.getDate();
                            if ((d > 7 && d <= 14) || (d > 21 && d <= 28)) {
                                return true;
                            }
                        }

                        // 祝日を無効
                        return holidays.some(h => 
                            h.getFullYear() === date.getFullYear() &&
                            h.getMonth() === date.getMonth() &&
                            h.getDate() === date.getDate()
                        );
                    }
                ]
            });
        });
    }
});

備考

holidays-jpというオープンなAPIを利用して、日本の祝日を取得しています。
APIは年を問わず自動で最新の祝日を取得するため、翌年以降も安心です。

おわりに

Contact Form 7 だけでは実現できない、柔軟なカレンダー制御もflatpickrを使えば簡単に対応可能です。

特に以下のような業種におすすめです：

美容室などの予約管理
社内設備の予約
営業日ベースの申込受付など

「特定の曜日を無効化したい」「祝日を除外したい」などのニーズがある方は、ぜひこの方法を試してみてください。