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

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

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

#167 PHPで作るカレンダーの作り方2

WEB制作

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

公開日:
最終更新日:

商品リンクにアフィリエイト広告を利用しています

サイトマップサイトマップ

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>		

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

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

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

2024年3月
12
3456789
10111213141516
17181920212223
24252627282930
31

日付:

土日祝日除外カレンダー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ヵ月を超える場合は矢印が表示されません。

2024年3月
12
3456789
10111213141516
17181920212223
24252627282930
31
2024年4月
123456
78910111213
14151617181920
21222324252627
282930
2024年5月
1234
567891011
12131415161718
19202122232425
262728293031

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

月縛りなしで、カレンダーのめくり機能をつけるなら、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デザイナー・プログラミング学習にオススメ

記事内で紹介している商品リスト
(価格はAmazon参考価格)

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

2,750円(税込)

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

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

2,728円(税込)

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

スッキリわかるSQL入門 第2版 ドリル222問付き! (スッキリわかる入門シリーズ)

3,030円(税込)

スッキリわかるSQL入門 第2版 ドリル222問付き! (スッキリわかる入門シリーズ)

誰もがあきらめずにすむPHP超入門

1,848円(税込)

誰もがあきらめずにすむPHP超入門

SQL 第2版 ゼロからはじめるデータベース操作 (プログラミング学習シリーズ)

2,068円(税込)

SQL 第2版 ゼロからはじめるデータベース操作 (プログラミング学習シリーズ)

3ステップでしっかり学ぶ MySQL入門 [改訂2版]

2,728円(税込)

3ステップでしっかり学ぶ MySQL入門 [改訂2版]

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

2,640円(税込)

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

WordPressユーザーのためのPHP入門 はじめから、ていねいに。[第3版] 〈WordPress 5.x/Gutenberg対応〉

1,652円(税込)

WordPressユーザーのためのPHP入門 はじめから、ていねいに。[第3版] 〈WordPress 5.x/Gutenberg対応〉

詳細! PHP 8 + MySQL入門ノート XAMPP + MAMP 対応

3,520円(税込)

詳細! PHP 8 + MySQL入門ノート XAMPP + MAMP 対応

PHPで作るカレンダーの作り方2の関連ページ

tableデザイン

tableで作る表をシンプルでキレイに作るHTMLとCSS

tableで表を作るときに気を付けたいのが、どこまでシンプルでわかりやすく作れるかという点ではないかと個人的には思ってます

PHPで作るカレンダー

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

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

配列の解説

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

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

つまづきやすい5つのポイント

【初心者むけ】Jqueryのつまづきやすい5つのポイント解説

Jqueryの構文がわかってなかったとき、とりあえずコピペして使ってました。 ちゃんと理解して使うとできることが増えます

WEB言語紹介

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

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

ランダム表示バナー

PHPで作るランダムバナー表示プログラム

PHPでランダム表示させるバナープログラムです。 バナーと言っていますが、別にバナーじゃなくてもランダムで表示できます。

URLの疑似静的化

URLの疑似静的化 動的URLを静的URLにする方法

htacessを使いhtmlファイルが存在しない静的URLを生成する方法と、仕事で使った疑似URLの活用方法の紹介です。

PHPを使って作るCMS

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

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

日付比較

キャンペーン期間中だけ表示させるPHPプログラム

期間限定の表示は訴求が強いけど、取り忘れるとユーザーに損した気分を与えてしまうので、忘れずにしっかり対応したいですね。

PHPの覚え方

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

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

PHP覚え方

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

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

POST送信

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

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

スクロール監視

スクロール監視の新定番 intersecton observer API

スクロールに応じて何を変更させたりするときに便利なintersecton Observer APIの解説記事です。

アンカーリンクナビ

交差監視を利用したアンカーリンクナビゲーション

JavaScriptの「Intersection Observer」を使い、ナビゲーションが変化するアンカーリンクを作りました。

bookblock

本をめくるJqueryライブラリ bookblock

本をめくるようなモーションを実現するbookblock.jsを改造してレスポンシブ対応にしてみました。

jquery-match-height.js

高さを簡単に揃えるjquery-match-height.js

簡単に要素の高さを揃える「jquery-match-height.js実際の使用例をわかりやすく画像付きで解説しています。

indexOf

JavaScriptのIndexOfの使い方の復習

indexOfを使ってindex番号を取得する方法の解説記事を書いていたら、indexOfを使わなくても取得できました。

交差監視

Intersection Observer APIを図解で解説

Intersection Observerを仕事で使ったときに理解度が足りないと感じわかりやすい解説記事を書きました。

SVG背景

CSSとSVGを使った三角形背景の作り方

SVG背景を覚えたらborderで背景画像を作るのが馬鹿らしくなります。 それくらい簡単で汎用性の高い方法です。

WEBフォント設定

WEBフォント使用時の最適な設定を考える

私のサイトではNotoSansJPのWEBフォントを使用しています。 可能な限り速度とCLSを考慮して使っております。

アイキャッチの作り方

参考にならない適当につくるアイキャッチの作り方!

ブログのアイキャッチをどうやって作っているかの解説であって、効果があがるとかクリック率が高いとかそういうのじゃないです。

SNSでこの記事をシェアできます

ブログ デイリーアクセスランキング

jquery-match-height.js
1位

jquery-match-height.js

簡単に要素の高さを揃える「jquery-match-height.js実際の使用例をわかりやすく画像付きで解説しています。

SEL50F18F
2位

SEL50F18F

ソニーの単焦点レンズSEL50F18Fを愛用しています。コスパに優れた単焦点レンズで、F値の開放が1.8と明るく撮れるレンズです。

Kazakiri 1枚刃のカミソリ
3位

Kazakiri 1枚刃のカミソリ

カミソリの替刃の価格が高すぎるので1枚当たり11円で使える片刃のカミソリを購入しました! 切れ味抜群でヒゲソリが楽しい!

千鳥ヶ淵夜桜
4位

千鳥ヶ淵夜桜

2019年4月3日に九段下は千鳥ヶ淵の夜桜撮影をα7Ⅲでしてきました。往路は広角レンズSEL24F14GMで復路は単焦点レンズSEL50F18Fにて。

ノートPCスタンド
5位

ノートPCスタンド

ノートパソコンを横にしまうと結構な専有面積があるのですが、立てて収納できればわずか数cmで使えるので本当に快適です!

車用スマホホルダー
6位

車用スマホホルダー

スマホをカーナビとして使うと熱さで充電ができなくなるので、熱対策と1年間使って外れることがなかったスマホホルダーの紹介。

レンズ比較
7位

レンズ比較

「ズームレンズ SEL2870」「単焦点レンズ SEL50F18F」「マクロレンズ SEL50M28」の比較検証をしました

MusicBeeのレイアウト変更方法
8位

MusicBeeのレイアウト変更方法

MusicBee 3.1のレイアウトをデフォルトの状態から、自分好みのレイアウト設定に変更する方法を写真付きで紹介しています。

静岡家族旅行 計画編
9位

静岡家族旅行 計画編

2018年8月20日に毎年恒例の夏の家族旅行の行き先を静岡県に決定! 静岡県の選定理由と観光名所の選定の計画について。

α7Ⅲで夜景
10位

α7Ⅲで夜景

去年はPENTAX Q7で撮影してきた東京タワーと浅草に今年も夜桜撮影に行ってきました。買ったばかりのソニー α7Ⅲを片手に。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

世の中にある比較サイトや、いかがでしたか系サイトが嫌いなんです。使ってないのにえらそうなこと言うなと。なので体験談です。

WEB制作

WEB制作

WEBサイトを作れますと一言に言っても色々な技術があるわけですよ。アウトプットの形は一緒でもいろいろこだわりがあるんです。

カメラ

カメラ

2018年4月に購入したソニーのミラーレス一眼「α7Ⅲ」に関連する記事一覧ページです。 作例集やカメラグッズレビューなど。

美味しいもの

美味しいもの

食に関してはあまりこだわりがないんですけどね、こだわりがない分美味しいと思ったものは本当においしいと思ったものなんですよ

Amazonプライム動画

Amazonプライム動画

Amazonプライム会員なら無料で利用できるAmazonプライム動画から、いろいろな動画をみたレビュー記事のまとめページ

旅LOG

旅LOG

家族旅行やおでかけした際の旅ブログです。夏休みの家族旅行(4人家族)で訪れた観光名所の感想などを記しています。

プロフィール

プロフィール

Start-Point.netの管理人のプロフィール紹介を兼ねた、自分の中のルールや決め事やエピソードなでお書いていきます

日記

日記

日記と言っても色々な日記があるわけで、記録的な日記や心理描写を色濃く描いた日記などをまとめたページです。

thanks

thanks

自分を表現することって意外と難しいんですよね。照れがあったり、間違ったこといってないかとよくわからない何かと戦ったりして。

記事内で紹介している商品

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

2,750
(税込)