予約カレンダー サンプル

Advanced Custom Fields Pro とContact Form 7 でメールフォームでの予約を受け付けます。
実装について詳しくはこちら。
下のメールフォームは動作しています。日時を選択して送信後ページがリロードされると、選択した日時が×になります。

1時間１枠１組の設定で予約を受け付けるサンプルです。
*↓は当日は１時間前までの受付となっています。
10:00～
11:00～
12:00～
13:00～
14:00～
15:00～
4月
26日
(日)
/
/
/
/
/
/
4月
27日
(月)
◎
◎
◎
◎
×
◎
4月
28日
(火)
×
◎
◎
◎
◎
◎
4月
29日
(水)
◎
◎
◎
◎
◎
◎
4月
30日
(木)
◎
◎
◎
◎
◎
◎
5月
1日
(金)
×
◎
◎
◎
◎
◎
5月
2日
(土)
/
/
/
/
/
/
5月
3日
(日)
/
/
/
/
/
/
5月
4日
(月)
◎
◎
◎
◎
◎
◎
5月
5日
(火)
◎
◎
◎
◎
◎
◎
5月
6日
(水)
◎
◎
◎
◎
◎
◎
5月
7日
(木)
◎
◎
◎
◎
◎
◎
5月
8日
(金)
×
×
◎
◎
◎
◎
5月
9日
(土)
/
/
/
/
/
/
5月
10日
(日)
/
/
/
/
/
/
5月
11日
(月)
◎
◎
◎
◎
◎
◎
5月
12日
(火)
◎
◎
◎
◎
◎
◎
5月
13日
(水)
◎
◎
◎
◎
◎
◎
5月
14日
(木)
◎
◎
◎
◎
◎
◎
5月
15日
(金)
◎
◎
◎
◎
◎
◎
5月
16日
(土)
/
/
/
/
/
/
5月
17日
(日)
/
/
/
/
/
/
5月
18日
(月)
◎
◎
◎
◎
◎
◎
5月
19日
(火)
◎
◎
◎
◎
◎
◎
5月
20日
(水)
◎
◎
◎
◎
◎
◎
5月
21日
(木)
◎
◎
◎
◎
◎
◎
5月
22日
(金)
◎
◎
◎
◎
◎
◎
5月
23日
(土)
/
/
/
/
/
/
5月
24日
(日)
/
/
/
/
/
/
5月
25日
(月)
◎
◎
◎
◎
◎
◎
5月
26日
(火)
◎
◎
◎
◎
◎
◎
5月
27日
(水)
◎
◎
◎
◎
◎
◎
5月
28日
(木)
◎
◎
◎
◎
◎
◎
5月
29日
(金)
◎
◎
◎
◎
◎
◎
5月
30日
(土)
/
/
/
/
/
/
5月
31日
(日)
/
/
/
/
/
/
6月
1日
(月)
◎
◎
◎
◎
◎
◎
6月
2日
(火)
◎
◎
◎
◎
◎
◎
6月
3日
(水)
◎
◎
◎
◎
◎
◎
6月
4日
(木)
◎
◎
◎
◎
◎
◎
6月
5日
(金)
◎
◎
◎
◎
◎
◎
6月
6日
(土)
/
/
/
/
/
/
6月
7日
(日)
/
/
/
/
/
/
6月
8日
(月)
◎
◎
◎
◎
◎
◎
6月
9日
(火)
◎
◎
◎
◎
◎
◎
6月
10日
(水)
◎
◎
◎
◎
◎
◎
6月
11日
(木)
◎
◎
◎
◎
◎
◎
6月
12日
(金)
◎
◎
◎
◎
◎
◎
6月
13日
(土)
/
/
/
/
/
/
6月
14日
(日)
/
/
/
/
/
/
6月
15日
(月)
◎
◎
◎
◎
◎
◎
6月
16日
(火)
◎
◎
◎
◎
◎
◎
6月
17日
(水)
◎
◎
◎
◎
◎
◎
6月
18日
(木)
◎
◎
◎
◎
◎
◎
6月
19日
(金)
◎
◎
◎
◎
◎
◎
6月
20日
(土)
/
/
/
/
/
/
10:00～
11:00～
12:00～
13:00～
14:00～
15:00～




    送信後、ページがリロードされます。