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

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

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

#167 カレンダーの作り方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>		

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

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

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

2022年12月
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ヵ月を超える場合は矢印が表示されません。

2022年12月
123
45678910
11121314151617
18192021222324
25262728293031
2023年1月
1234567
891011121314
15161718192021
22232425262728
293031
2023年2月
1234
567891011
12131415161718
19202122232425
262728

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

月縛りなしで、カレンダーのめくり機能をつけるなら、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問付き! (スッキリわかる入門シリーズ)

4,300円(税込)

スッキリわかる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対応〉

2,640円(税込)

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

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

3,520円(税込)

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

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

ランダム表示バナー

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

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

配列の解説

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

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

PHPを使って作るCMS

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

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

日付比較

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

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

PHPの覚え方

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

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

POST送信

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

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

PHP覚え方

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

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

カレンダー

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

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

WEB言語紹介

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

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

indexOf

JavaScriptのIndexOfの使い方の復習

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

アンカーリンクナビ

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

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

bookblock

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

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

jquery-match-height.js

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

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

交差監視

Intersection Observer APIを図解で解説

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

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

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

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

スクロール監視

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

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

tableデザイン

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

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

CLS対策上級編

CLS対策上級編 CSSのインライン化とAdcence遅延読み込み

CSSのインライン化とGoogle Adcence遅延読み込みでGoogleのスコアを大幅に改善しCLSもほぼ0にしました

CLS対策初級編

CLS改善をしてPageSpeed Insightsを大幅改善

CLS(Cumulative Layout Shift)を改善する方法とCLSを確認する方法などをまとめました。

CSSで作る横スライド

1行のCSSで作る横スライドの作り方

CSSのoverflow-x: scrollを使った横スライドの簡単な作り方と事例紹介です。 簡単便利はいいことだ。

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

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

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

MusicBeeのレイアウト変更方法

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

ノートPCスタンド
2位

ノートPCスタンド

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

アンズテック
3位

アンズテック

小学生向けのゲームプログラミングオンラインスクール「アンズテック」。 仕様言語は「Scratch」と「Unity」となっています。

コンプライ
4位

コンプライ

評判と値段の高いコンプライのイヤーピースの購入後1週間レビュー!柔らかいウレタン素材のイヤーピースは装着前に指でつぶして耳穴に装着します。

ロジクール マウス
5位

ロジクール マウス

PCを操作するのに必要なマウス。高級品でも安いマウスでも操作をするという点においては大差はありません。違いがあるのは操作に対する満足感。

NORDACE
6位

NORDACE

NORDACEのSIENAというシンプルで機能的で収納力に優れたノートパソコンも入れられるナイスなリュックのレビューです

ASMR
7位

ASMR

ASMRと呼ばれるバイノーラル録音されたノイズ音を楽しむという言葉にするとよくわからない音フェチ動画にはまったという話

ミトラ
8位

ミトラ

肩こりは普段の姿勢と肩甲骨の稼働範囲の狭さが原因なので、肩甲骨のストレッチと正しい睡眠姿勢は大事だなと感じました。

ロジクール CRAFT
9位

ロジクール CRAFT

ロジクールが出している高級ワイヤレスキーボードCRAFTアプリがうまく動かなかったけどキーボードの使い心地は最高だった話

モバイルバッテリー
10位

モバイルバッテリー

スマホのバッテリーの充電が1日持たないけど、買い替えにはちと早い。そんな時にはモバイルバッテリーがオススメです。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

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

WEB制作

WEB制作

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

カメラ

カメラ

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

美味しいもの

美味しいもの

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

Amazonプライム動画

Amazonプライム動画

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

旅LOG

旅LOG

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

プロフィール

プロフィール

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

日記

日記

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

thanks

thanks

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

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

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

2,750
(税込)