クリックしたら日付を取得できるカレンダーの作り方

PHPで作るカレンダーの作り方の第二弾です。 今回はクリックした日付を取得してformに代入するところも解説してます。

PHP+jQueryで作る土日祝日が選べないカレンダーの作り方

カレンダーの作り方2 WEB制作

来店予約などに使える土日祝日が選択(クリック)できないカレンダーをPHP+HTML+jQueryで作る解説記事。HTMLのformで使えるdateは便利なんですが、土日祝日を選ばせない方法がわからなかったのでPHPで作りました。備忘録。

公開日:
最終更新日:

  • Twtterでシェアする
  • はてなブックマーク
  • フェイスブックでシェア
  • ポケットでシェア
  • LINEで友達に送る
  • rss2.0

PHP+jQueryでカレンダーを作る&日付も取得する

前回作った祝日対応カレンダーを利用して、日付をクリックしたら、その日付を取得して、フォームに代入する処理を行います。

▼前回のカレンダーはこちらです

日付取得にはjQueryを使います。
イマドキjQueryなんて、と言われそうですが、jQuery使う方が簡単なので許してください。

jQueryが苦手な方はこちらの記事を読むのがオススメです。

日付取得の流れを考えて言語化する

PHP+HTMLで作られたカレンダーから、クリックした日付を取得したいので、トリガーが「日付をクリック」になります。
もう少し具体的に言うと、日付を表示させている<td>タグをクリックしたら、がトリガーです。

クリックした日付を取得したいので、<td>にdata-dateという属性を追加して、それを取得します。

取得した日付のdata-dateをフォームタグに代入します。

言語化した内容をプログラムで組む

やりたいことが言語化できたので、これをjQueryの文法に当てはめれば完了ですね。
言語化できればプログラムは組めます。

前回作ったカレンダーのプログラム

完成版のソースを先に出しておきます。

要件を整理すると、土日祝日は予約のできないカレンダーを作ってほしい、というものでした。

PHPソース

//祝日の読み込み
$file = new SplFileObject("img/syukujitsu.csv"); 
$file->setFlags(SplFileObject::READ_CSV); 	
$syuku_array = array();
foreach ($file as $line) {
	if(isset($line[1])){
		$date = date("Y-m-d",strtotime($line[0]));
		$name = $line[1];
		$syuku_array[$date] = $name;
	}
}

$week = array('日','月','火','水','木','金','土');	
$now_month = date("Y年n月"); //表示する年月
$start_date = date('Y-m-01'); //開始の年月日
$end_date = date("Y-m-t"); //終了の年月日
$start_week = date("w",strtotime($start_date)); //開始の曜日の数字
$end_week = 6 - date("w",strtotime($end_date)); //終了の曜日の数字

echo '<table class="cal">';
//該当月の年月表示
echo '<tr>';
echo '<td colspan="7" class="center">'.$now_month.'</td>';
echo '</tr>';

//曜日の表示 日~土
echo '<tr>';
foreach($week as $key => $youbi){
	if($key == 0){ //日曜日
		echo '<th class="sun">'.$youbi.'</th>';
	}else if($key == 6){ //土曜日
		echo '<th class="sat">'.$youbi.'</th>';
	}else{ //平日
		echo '<th>'.$youbi.'</th>';
	}	
}
echo '</tr>';

//日付表示部分ここから
echo '<tr>';
//開始曜日まで日付を進める
for($i=0; $i<$start_week; $i++){
	echo '<td></td>';
}
//1日~月末までの日付繰り返し
for($i=1; $i<=date("t"); $i++){
	$set_date = date("Y-m",strtotime($start_date)).'-'.sprintf("%02d",$i);	
	$week_date = date("w", strtotime($set_date));
	
	//土日で色を変える
	if($week_date == 0){
		//日曜日
		echo '<td class="sun ng">'.$i.'</td>';
	}else if($week_date == 6){
		//土曜日
		echo '<td class="sat ng">'.$i.'</td>';
	}else if(array_key_exists($set_date,$syuku_array)){
		//祝日
		echo '<td class="sun ng">'.$i.'</td>';
	}else if($i < $now_date){
		//過去日付はNG
		echo '<td class="ng">'.$i.'</td>';
	}else{
		//平日
		echo '<td data-date="'.$set_date.'" class="ok">'.$i.'</td>';
	}	
	if($week_date == 6){
		echo '</tr>';
		echo '<tr>';
	}
}

//末日の余りを空白で埋める
for($i=0; $i<$end_week; $i++){
	echo '<td></td>';
}

echo '</tr>';
echo '</table>';

Jquery ソース

<script>
$(".ok").click(function(){
	let get_date = $(this).data("date");
	$('input[name="get_date"]').val(get_date);
});
</script>		

出来上がった祝日がクリックできないカレンダー

クリックできない日付はグレーになり、白い日付はマウスオーバーでカーソルになり、クリックすると日付のテキストがフォームに代入されます。

また、予約日を選択するカレンダーであるため、過去の日付もクリックできないようにしています。

2021年7月
123
45678910
11121314151617
18192021222324
25262728293031

日付:

土日祝日除外カレンダーPHPソースの解説

カレンダー制作の基礎的な解説は前回の記事を見ていただくとして、今回付け加えた部分を解説します。

付け足したのは、CSSのクラスと、現在日付の取得、data属性になります。

予約可能日はclass="ok" それ以外はngを設定

予約可能日のtdにはclass="ok"を設定し、それ以外の日付にはngのクラスを振ります。
css側で見た目と、マウスオーバー時のアクションを設定します。

予約が可能な日付の場合、data-dateという属性をつけて、日付を設定します。

echo '<td data-date="'.$set_date.'" class="ok">'.$i.'</td>';

jQueryでクリックした日付を取得→代入の処理

予約可能な日付の<td>をクリックした場合をトリガーにするので、okのクラスを持っているtdをクリックした場合、に処理をします。

$(".ok").click(function(){

クリックしたtdのdata-dateを取得する変数を作ります。

let get_date = $(this).data("date");

取得した日付をinputのvalueに代入します。

$('input[name="get_date"]').val(get_date);	

これで土日祝日がクリックできないカレンダーが完成しました。
見せ方や出し方はCSSで調節して、お好みに合わせて完成です。

といいたいところなんですが、このままだと月末に近づくにつれて、予約できる日付が存在しなくなる問題があります。

なので、三ヵ月先まで進めるカレンダーにします。
何か月でもいいんですが、あまり先の予約ができても仕方がないので、三ヵ月くらいがいいんじゃないかと。

月送り&戻し機能をつけたカレンダー

現在の月から3ヵ月先までめくれるカレンダーがこちら。
矢印の↑をクリックで次月、↓をクリックで前月に戻ります。
前後3ヵ月を超える場合は矢印が表示されません。

2021年7月
123
45678910
11121314151617
18192021222324
25262728293031
2021年8月
1234567
891011121314
15161718192021
22232425262728
293031
2021年9月
1234
567891011
12131415161718
19202122232425
2627282930

基本的な作り方がわかれば、この辺の応用はいろいろなやり方が考えられますね。

月縛りなしで、カレンダーのめくり機能をつけるなら、ajaxを使って取得したい年月日をカレンダー化するのが良いかと思います。

今回のサンプルは、カレンダーを3つ(3ヵ月分)作って、jQueryのfadeInで月の切り替えを行う方式にしています。

細かい解説はあえてしませんが、同じことの繰り返しとなっています。

最終のソースと概要だけ解説して終わりたいと思います!

echo '<div class="cal_disp">';
//祝日の読み込み
$file = new SplFileObject("img/syukujitsu.csv"); 
$file->setFlags(SplFileObject::READ_CSV); 	
$syuku_array = array();
foreach ($file as $line) {
	if(isset($line[1])){
		$date = date("Y-m-d",strtotime($line[0]));
		$name = $line[1];
		$syuku_array[$date] = $name;
	}
}

$week = array('日','月','火','水','木','金','土');	
$get_date = date("Y-m");	
//3ヵ月分なので3回繰り返し
for($x=0; $x<3; $x++){
	//▼年月に-1を付けて月初を生成
	$tt = $get_date.'-1';
	//▼現在の日付を起点にfor文の該当月を生成
	$now_date = date('Y-m-01', strtotime($tt.'+'.$x.' month'));
	//▼カレンダーの見出しの年月用
    $now_month = date("Y年n月",strtotime($now_date."+".$x." month"));
	//▼毎月の月末日付取得
	$end_day = date("t",strtotime($now_date));
	//▼月初めの空セルの生成用
	$start_week = date("w", strtotime($now_date.'-01'));
	
	//▼jQueryで制御するためユニークなクラスをつける
    echo '<div class="set_cal'.$x.'">';
	echo '<table class="cal">';
	//該当月の年月表示
	echo '<tr>';
	if($x != 0){
		$set_x = $x -1;
		//▼前月に戻す
		echo '<td class="pre" data-pre="'.$set_x.'">↑</td>';
	}else{
		echo '<td></td>';
	}
	echo '<td colspan="5" class="center">'.date("Y年n月",strtotime($now_date)).'</td>';
	
	if($x != 2){
		$set_n = $x +1;
		//▼次月にすすむ
		echo '<td class="next" data-next="'.$set_n.'">↓</td>';
	}else{
		echo '<td></td>';
	}
	echo '</tr>';

	//曜日の表示 日~土
	echo '<tr>';
	foreach($week as $key => $youbi){
		if($key == 0){ //日曜日
			echo '<th class="sun">'.$youbi.'</th>';
		}else if($key == 6){ //土曜日
			echo '<th class="sat">'.$youbi.'</th>';
		}else{ //平日
			echo '<th>'.$youbi.'</th>';
		}	
	}
	echo '</tr>';

	//日付表示部分ここから
	echo '<tr>';
	//開始曜日まで日付を進める
	for($i=0; $i<$start_week; $i++){
		echo '<td></td>';
	}
	//1日~月末までの日付繰り返し
	$now_date_ymd = strtotime(date("ymd"));
	for($i=1; $i<=$end_day; $i++){		
		$set_date = date("Y-m",strtotime($now_date)).'-'.sprintf("%02d",$i);
		$week_date = date("w", strtotime($set_date));
		$set_date_ymd = strtotime($set_date);

		//土日で色を変える
		if($week_date == 0){
			//日曜日
			echo '<td class="sun ng">'.$i.'</td>';
		}else if($week_date == 6){
			//土曜日
			echo '<td class="sat ng">'.$i.'</td>';
		}else if(array_key_exists($set_date,$syuku_array)){
			//祝日
			echo '<td class="sun ng">'.$i.'</td>';
		}else if($now_date_ymd >= $set_date_ymd){
			//過去日付はNG
			echo '<td class="ng">'.$i.'</td>';
		}else{
			//平日
			echo '<td data-date="'.$set_date.'" class="ok">'.$i.'</td>';
		}	
		if($week_date == 6){
			echo '</tr>';
			echo '<tr>';
		}
	}

	//末日の余りを空白で埋める
	for($i=$week_date; $i<6; $i++){
		echo '<td></td>';
	}
	echo '</tr>';
	echo '</table>';
	echo '</div>';
}//end for	

echo '</div>';

月送りのjQuery

.nextと.preが追加されています。

.next か .pre をクリックすると次のカレンダーをfadeInして表示してます。

<script>
$(".ok").click(function(){
	let get_date = $(this).data("date");
	$('input[name="get_date"]').val(get_date);
});
	
$(".pre").click(function(){
	let pre = $(this).data("pre");
	$(".cal_disp div").hide();
	$(".cal_disp .set_cal" + pre).fadeIn();
});

$(".next").click(function(){
	let next = $(this).data("next");
	$(".cal_disp div").hide();
	$(".cal_disp .set_cal" + next).fadeIn();
	console.log(next);
});	
</script>

WEBデザイナー・プログラミング学習にオススメ

  • Twtterでシェアする
  • はてなブックマーク
  • フェイスブックでシェア
  • ポケットでシェア
  • LINEで友達に送る
  • rss2.0
はてなブックマーク

おもしろかったらぜひ、はてなブックマークをお願いいたします。

次の記事はこちら

プロフィール:fuchi WEBクリエイター

fuchi
WEBクリエイター / 個人事業主
40歳 / ♂ / 鳥好き

WEB制作とWEBマーケティングをやってきました。
PHPとMysqlを使って面白いことをやりたいと模索中です。

ロリポップのレンタルサーバーを使っています

プロフィール詳細はこちら

文中で紹介している商品

初心者からちゃんとしたプロになる PHP基礎入門〈PHP8対応〉

初心者からちゃんとしたプロになる PHP基礎入門〈PHP8対応〉 プログラミング 【初心者からちゃんとしたプロになる PHP基礎入門〈PHP8対応〉】

2,750円 (Amazon価格)

【Amazon.co.jp 限定】ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 (DL特典: CSS クラス名 チートシート)

【Amazon.co.jp 限定】ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 (DL特典: CSS クラス名 チートシート) インターネット入門書 【【Amazon.co.jp 限定】ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 (DL特典: CSS クラス名 チートシート)】

2,728円 (Amazon価格)

カレンダーの作り方2 オススメ関連コンテンツ

PHP 関連記事はこちら すべての WEB制作 記事はこちら

PHPを覚えたらSQLも覚えて自作のCMSを作ってみよう

PHPを覚えたらSQLも覚えて自作のCMSを作ってみよう

PHPを覚えたらデータベース回りも一緒に覚えるのがオススメです、 制作できるものの幅が広がって色々な仕組みを理解できます

PHPを使った漢字クイズの作り方解説 その1 POST送信

PHPを使った漢字クイズの作り方解説 その1 POST送信

【初心者向け】PHPを使った漢字クイズの作り方を解説します。1回目はGETとPOSTの簡単な解説から実際に使うPHPの紹介です。

PHPの良いところは難しいと思われていること

PHPの良いところは難しいと思われていること

PHPって人が思っているほど難しくなく、便利でいろいろな面白いものを作れるプログラミング言語です。

PHPの連想配列の多次元配列を使ったクイズの作り方

PHPの連想配列の多次元配列を使ったクイズの作り方

PHPの配列ってイメージは付くけどちゃんと理解するのが難しい。 例題がわかりづらいせいだと思うんですよね。これはわかりやすい。

PHP+HTMLで作る 祝日対応のカレンダーの作り方

PHP+HTMLで作る 祝日対応のカレンダーの作り方

forとifとforeachがメインのPHPによるカレンダーの作り方です。 祝日設定がちょっとめんどくさいんですよね。

PHPを手っ取り早く覚えるには作りたいものを作ること

PHPを手っ取り早く覚えるには作りたいものを作ること

PHP単体でもHTMLよりもできることの幅はひろがるけれど、それにプラスしてデータベースを扱えるようになると無敵感を味わえます。

WEB制作をささえるHTML・CSS・Javascript・PHP

WEB制作をささえるHTML・CSS・Javascript・PHP

いつもWEB制作をささえてくれるいろいろな言語を紹介しています。 他にもMySQLがあるんですが長くなるので割愛しました

ブログアクセスランキング

新着記事

カテゴリリスト

プロフィール:fuchi WEBクリエイター

fuchi
WEBクリエイター / 個人事業主
40歳 / ♂ / 鳥好き

WEB制作とWEBマーケティングをやってきました。
PHPとMysqlを使って面白いことをやりたいと模索中です。

ロリポップのレンタルサーバーを使っています

プロフィール詳細はこちら

WEB制作関連・オススメ商品 amazon