ContactForm7でカレンダー方式で「日程予約」や「相談希望日」などの日付選択を行わせる際。
例えば、ザクッと土日祝日を除く日程だけを選択させたい場合は意外と多いのではないかと思います。
しかし残念ながらContactForm7の標準機能の「日付（datepicker）」では実現不可能です。
↓こんな小さめカレンダーは出てくるけど細かな設定は不可…
代わりにJqueryUIのDatepickerを使うと、様々な設定ができます。
今回は、土日祝日＋特定日付を選択不可にする方法をご紹介。
ヘッダーに必要スクリプトを読み込む
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script>以上を全て読み込んでください。
ContactForm7を使う固定ページのヘッダーにだけ読み込まれるよう、header.php内でif文で分岐しとくと良いと思います。
WordPressのヘッダーで読み込んでいる内容・順によっては正常に動作しないことがありますので（JQueryの読み込みが被っている等）、その際はご自身のテーマのヘッダーをよくご確認の上で、表示順などを工夫するなど試してみて下さい。
フォームの固定ページにdatepickerスクリプトを配置
jQuery.get('https://holidays-jp.github.io/api/v1/date.json', function (holidaysData) {
jQuery(function() {
var invalidDates = ['2023/05/24', '2023/05/25', '2023/05/26'];
$("#datepicker").datepicker({
minDate: 2,
maxDate: '+3M',
dateFormat: 'yy/mm/dd',
beforeShowDay: function(date) {
// 曜日コードを取得
var dayOfWeek = date.getDay();
// 特定の曜日を無効にする条件
if (dayOfWeek == 0 || dayOfWeek == 6) {
return [false, 'ui-state-disabled'];
}
// 祝日を無効にする条件
var holidays = Object.keys(holidaysData);
for (var i = 0; i < holidays.length; i++) {
var holiday = new Date(Date.parse(holidays[i]));
if (holiday.getYear() == date.getYear() &&
holiday.getMonth() == date.getMonth() &&
holiday.getDate() == date.getDate()) {
return [false, 'ui-state-disabled'];
}
}
// 特定の日付を無効にする条件
var dateString = jQuery.datepicker.formatDate('yy/mm/dd', date);
if (jQuery.inArray(dateString, invalidDates) != -1) {
return [false, 'ui-state-disabled'];
}
// 有効な日付
return [true, 'day-weekday', null];
}
});
});
});これは、固定ページのヘッダーないしページ内のカスタムHTMLでも</body>タグ直前でも良いので、<script>タグで囲って配置してください。
以下は設定項目の解説です。
特定の日付を設定
invalidDatesというところに、特定の日付を入れてください。
上記サンプルは3日分のみですが、同じ形式で「, ‘yy/mm/dd’」として入れていくともっと増やすことは可能です。
厳密には祝日には分類されていないような年末年始～お正月休み、またはお盆休みなどの日程を入れておくといいでしょう。
曜日を指定したい場合
dayOfWeekというところに曜日を示す数字を入れます。
現在、「土」「日」指定なので、コードを0と6にしています。
1＝月曜
2＝火曜
3＝水曜
4＝木曜
5＝金曜
6＝土曜
0＝日曜
という意味です。この曜日のコード（数字）を指定します。
もし複数の曜日でなく、1つの曜日（日曜）だけ指定したい場合は、dayOfWeekの行を
if (dayOfWeek == 0) {と1つだけコードをご記載ください。
minDate（いつから選択できるか）を設定
minDate:2
というのは、いつから選択できるかについての設定なので、「2日後から選択できる」という意味になります。
過去分や、今日＆明日の日付はグレーアウトして選択できません。
※土日祝や特定休日も含めて計算されてしまうので（＝つまり2営業日、とはならない）のでご注意ください。
maxDate（いつまで選択できるか）を設定
何年も先の予約など取られても面倒な話になりますので、いつまで選択できるかの設定もできます。
サンプルの+3Mは＝3ヶ月後まで選択できるけど、それ以降の日付はグレーアウトして選択できないようになる、という意味です。
そんなに混み合わないような予約の日付選択などでは、+6M＝半年後までや、+1Y＝1年後 と長めに初期設定しておいても良いかもしれません。
祝日データは Holidays JP APIから取得しています。
どのAPIにも言えますが、API元がもし更新されないようなことがあったら、祝日の判定がうまくいかなくなる可能性がありますので予めご了承ください。
ContactForm7側の設定
[text your-date id:datepicker readonly placeholder"ここをクリックして日付選択してください"]idをdatepickerとすることがミソです。（こうしないと動きません）
readonlyとしているのは、カレンダーから選択した日付を手動で書き換えられないようにするおまじないです。
placeholderは入れても入れなくても結構ですが、適時お好きなように変更してください。
結果の画面サンプル
↓結果、こんな感じで選択不可部分がグレーアウトして表示されていればOK！
