前回までのカレンダーは日曜始まりでしたが、今回は月曜始まりに変更。
また、年と月を選択リストにし、直接見たいところへ移動可能に。
左の「<<」ボタンで前月を、右の「>>」ボタンで翌月を表示可能に。
「今月」ボタンを押すと、即座に今月の表示に戻ります。
祝日のデータは、Googleカレンダーから取得したものです。前回は2012年からのデータしか無かったのですが、本日試したら、2010から2016年までの祝日データが取れました。・・・これを元にソース上の連想配列に・・・。
今回は以下のサイトを参考にさせていただきました。
PHPでカレンダー作成(翌月や先月も表示できるタイプ)
HTMLファイル(test_calendar2.html)からインラインフレーム内に呼び出してみました。
<!DOCTYPE html> <html lang="ja"> <head> <title>カレンダー</title> <meta charset="UTF-8"> </head> <body> <div align="center"> <iframe frameborder=0 width=400px height=400px src="cgi-bin/calendar/calendar2.php"></iframe> </div> </body> </html>
カレンダーを表示するPHPファイル(calendar2.php)には、祝日の連想配列 $holidays を入れたので長くなりました。
場所は、上記HTMLファイル内で指定したところです。
<?php session_start(); //ページの最初に呼び出す ?> <!DOCTYPE html> <html lang="ja"> <head> <title>カレンダー</title> <meta charset="UTF-8"> <link rel="stylesheet" href="../../_shared/css/calendar2.css"></p> <p><?php $h_start_year = 2010; $h_end_year = 2016; $holidays = array( "20100101" => "元日", "20100111" => "成人の日", "20100211" => "建国記念の日", "20100321" => "春分の日", "20100322" => "振替休日", "20100429" => "昭和の日", "20100503" => "憲法記念日", "20100504" => "みどりの日","20100505" => "こどもの日", "20100719" => "海の日", "20100920" => "敬老の日", "20100923" => "秋分の日", "20101011" => "体育の日", "20101103" => "文化の日", "20101123" => "勤労感謝の日", "20101223" => "天皇誕生日", "20101224" => "振替休日", "20110101" => "元日", "20110110" => "成人の日", "20110211" => "建国記念の日", "20110321" => "春分の日", "20110429" => "昭和の日", "20110503" => "憲法記念日", "20110504" => "みどりの日", "20110505" => "こどもの日", "20110718" => "海の日", "20110919" => "敬老の日", "20110923" => "秋分の日", "20111010" => "体育の日", "20111103" => "文化の日", "20111123" => "勤労感謝の日", "20111223" => "天皇誕生日", "20120101" => "元日", "20120102" => "振替休日", "20120109" => "成人の日", "20120211" => "建国記念の日", "20120320" => "春分の日", "20120429" => "昭和の日", "20120430" => "振替休日", "20120503" => "憲法記念日", "20120504" => "みどりの日", "20120505" => "こどもの日", "20120716" => "海の日", "20120917" => "敬老の日", "20120922" => "秋分の日", "20121008" => "体育の日", "20121103" => "文化の日", "20121123" => "勤労感謝の日", "20121223" => "天皇誕生日", "20121224" => "振替休日", "20130101" => "元日", "20130114" => "成人の日", "20130211" => "建国記念の日", "20130320" => "春分の日", "20130429" => "昭和の日", "20130503" => "憲法記念日", "20130504" => "みどりの日", "20130505" => "こどもの日", "20130506" => "振替休日", "20130715" => "海の日", "20130916" => "敬老の日", "20130923" => "秋分の日", "20131014" => "体育の日", "20131103" => "文化の日", "20131104" => "振替休日", "20131123" => "勤労感謝の日", "20131223" => "天皇誕生日", "20140101" => "元日", "20140113" => "成人の日", "20140211" => "建国記念の日", "20140321" => "春分の日", "20140429" => "昭和の日", "20140503" => "憲法記念日", "20140504" => "みどりの日", "20140505" => "こどもの日", "20140506" => "振替休日", "20140721" => "海の日", "20140915" => "敬老の日", "20140923" => "秋分の日", "20141013" => "体育の日", "20141103" => "文化の日", "20141123" => "勤労感謝の日", "20141124" => "振替休日", "20141223" => "天皇誕生日", "20150101" => "元日", "20150112" => "成人の日", "20150211" => "建国記念の日", "20150321" => "春分の日", "20150429" => "昭和の日", "20150503" => "憲法記念日", "20150504" => "みどりの日", "20150505" => "こどもの日", "20150506" => "振替休日", "20150720" => "海の日", "20150921" => "敬老の日", "20150922" => "国民の休日", "20150923" => "秋分の日", "20151012" => "体育の日", "20151103" => "文化の日", "20151123" => "勤労感謝の日", "20151223" => "天皇誕生日", "20160101" => "元日", "20160111" => "成人の日", "20160211" => "建国記念の日", "20160320" => "春分の日", "20160321" => "振替休日", "20160429" => "昭和の日", "20160503" => "憲法記念日", "20160504" => "みどりの日", "20160505" => "こどもの日", "20160718" => "海の日", "20160919" => "敬老の日", "20160922" => "秋分の日", "20161010" => "体育の日", "20161103" => "文化の日", "20161123" => "勤労感謝の日", "20161223" => "天皇誕生日", );</p> <p>function calendar(){ global $holidays; global $h_start_year; global $h_end_year;</p> <p>if($_SESSION["nen"] == ""){ $_SESSION["nen"] = date(Y); } if($_SESSION["tuki"] == ""){ $_SESSION["tuki"] = date(n); }</p> <p>$nowday = date(Ynj); //今日の日付 $nen = date(Y); $tuki = date(n);</p> <p>//今月の初めの曜日// $start_youbi = date("N", mktime(0, 0, 0,$tuki,1,$nen)); ///↑↑date(N)は1が月曜日 7が日曜日(PHP 5.1から)↑↑/// $tuki_owari = date(t); // その月の終りの日数</p> <p>/////////プルダウンリストから年を選んだ時の処理//////////// if($_POST['year']){ $_SESSION["nen"] = $_POST['year']; $start_youbi = date("N", mktime(0, 0, 0,$_SESSION["tuki"],1, $_SESSION["nen"])); $tuki_owari = date("t",mktime(0, 0, 0,$_SESSION["tuki"],1, $_SESSION["nen"])); }</p> <p>/////////プルダウンリストから月を選んだ時の処理//////////// if($_POST['month']){ $_SESSION["tuki"] = $_POST['month']; $start_youbi = date("N", mktime(0, 0, 0,$_SESSION["tuki"],1, $_SESSION["nen"])); $tuki_owari = date("t",mktime(0, 0, 0,$_SESSION["tuki"],1, $_SESSION["nen"])); }</p> <p>/////////ココから←先月の処理///////////// if(@$_POST['sengetu']){ if($_SESSION["tuki"]==1){ $_SESSION["nen"]=$_SESSION["nen"]-1; $_SESSION["tuki"] = 12; //1月だったら、年を1減らして12月にする }else{ //以下は 1月以外の処理 $_SESSION["tuki"]=$_SESSION["tuki"]-1; } if($_SESSION["nen"]<=($h_start_year - 1)){ //祭日データの無い月は表示しない $_SESSION["nen"]=$_SESSION["nen"]+1; $_SESSION["tuki"]=1; } $start_youbi = date("N", mktime(0, 0, 0,$_SESSION["tuki"],1, $_SESSION["nen"])); $tuki_owari = date("t", mktime(0, 0, 0,$_SESSION["tuki"],1, $_SESSION["nen"])); }</p> <p>/////////ココから来月→の処理//////////// if(@$_POST['raigetu']){ if($_SESSION["tuki"]==12){ $_SESSION["nen"]=$_SESSION["nen"]+1; $_SESSION["tuki"] = 1; //12月だったら1月にして年を1増やす }else{ //以下は12月以外の処理 $_SESSION["tuki"]=$_SESSION["tuki"]+1; } if($_SESSION["nen"]>=($h_end_year + 1)){ //祭日データの無い月は表示しない $_SESSION["nen"]=$_SESSION["nen"]-1; $_SESSION["tuki"]=12; } $start_youbi = date("N", mktime(0, 0, 0,$_SESSION["tuki"],1, $_SESSION["nen"])); $tuki_owari = date("t", mktime(0, 0, 0,$_SESSION["tuki"],1, $_SESSION["nen"])); }</p> <p>/////////ココから今月→の処理//////////// if(@$_POST['kongetu']){ $_SESSION["nen"] = date(Y); $_SESSION["tuki"] = date(n); $start_youbi = date("N", mktime(0, 0, 0,$_SESSION["tuki"],1, $_SESSION["nen"])); $tuki_owari = date("t", mktime(0, 0, 0,$_SESSION["tuki"],1, $_SESSION["nen"])); }</p> <p>//////////////フォーム部分///////////////////////</p> <p>echo<<<EOT <h1 class="entry-title">カレンダー</h1> <div class="calendar_box"> <div style="text-align:center;"> <div style="margin-left:auto; margin-right:auto;"></p> <p><form action="" method="post"></p> <p><input type="submit" name="sengetu" value="<<"></p> <p><input type="hidden" name="nen" value="{$_SESSION["nen"]}"> <input type="hidden" name="tuki" value="{$_SESSION["tuki"]}"></p> <p><select name="year" onChange="submit()"> EOT;</p> <p>for ($i = 2010; $i <= 2016; $i++) { echo "<option value='".$i."'"; if ($i == $_SESSION["nen"]) echo " selected"; $di = mb_convert_kana($i,A,"UTF8"); echo ">".$di."年</option>\n"; }</p> <p>echo<<<EOT </select> <select name="month" onChange="submit()"> EOT;</p> <p>for ($i = 1; $i <= 12; $i++) { echo "<option value='".$i."'"; if ($i == $_SESSION["tuki"]) echo " selected"; $di = mb_convert_kana($i,A,"UTF8"); echo ">".$di."月</option>\n"; }</p> <p>echo<<<EOT </select></p> <p><input type="submit" name="raigetu" value=">>"></p> <p><input type="submit" name="kongetu" value="今月"></p> <p></form></p> <p></div> </div> <table class="calendar"> <tr> <th class="yobi y_blue">月</th> <th class="yobi y_blue">火</th> <th class="yobi y_blue">水</th> <th class="yobi y_blue">木</th> <th class="yobi y_blue">金</th> <th class="yobi y_green">土</th> <th class="yobi y_red">日</th> </tr> <tr> EOT;</p> <p>$y = $_SESSION["nen"]; $m = $_SESSION["tuki"]; $zengetsu =0; $kongetsu =0; $yokugetsu =0; $cnt = 1; $orikaesi =0; if($start_youbi != 1){//月曜始まりでなければ空セル発射! $zy = $y; $zm = $m - 1; if($zm == 0){ $zm = 12; $zy = $zy - 1; } $zd = date("j",mktime(0,0,0,$m,0,$y)) - $start_youbi + 2 ; for($i=2 ; $i<=$start_youbi ; $i++){ $zengetsu_ymd = date("Ymd",mktime(0,0,0,$zm,$zd,$zy)); echo '<td class="bkgd_gray">'.$zd; if($holidays[$zengetsu_ymd]){ echo '<div class="txt_red">'.$holidays[$zengetsu_ymd].'</div>'; } echo '</td>'; $zd++; $zengetsu++; $orikaesi++; } } while($cnt<=$tuki_owari){ if(($orikaesi == 6)or($holidays[date("Ymd", mktime(0, 0, 0, $m, $cnt, $y))])){ $td = "bkgd_red";//日曜日または祝日の色 $td_txt = "txt_red"; }elseif($orikaesi == 5){ $td = "bkgd_green";//土曜日の色 $td_txt = "txt_green"; }else{ $td = "bkgd_blue";//平日の色 $td_txt = "txt_blue"; } if($nowday==$_SESSION["nen"].$_SESSION["tuki"].$cnt){ $today_c = "bkgd_today"; //本日を示すの色 }else{ $today_c = $td; //本日以外の色 } echo '<td class="date_block '.$td.'"><div class="'.$td_txt.' '.$today_c.'">'.$cnt.'</div>'; if($holidays[date("Ymd", mktime(0, 0, 0, $m, $cnt, $y))]){ echo '<div class="'.$td_txt.'">'.$holidays[date("Ymd",mktime(0,0,0,$m,$cnt,$y))].'</div>'; } echo '</td>'; $kongetsu++; $cnt++; $orikaesi++; if($orikaesi ==7){ echo "</tr><tr>\n"; //折り返し $orikaesi =0;//折り返しカウンタリセット } } $zk_days = $zengetsu + $kongetsu; $e = 42 - $zk_days; $yy = $y; $ym = $m + 1; if($ym == 13){ $ym = 1; $yy = $yy + 1; } $i = 0; $yd = date("j",mktime(0,0,0,$m,$cnt,$y)) + $i; while($i<$e){ $yokugetsu_ymd = date("Ymd",mktime(0,0,0,$ym,$yd,$yy)); echo '<td class="bkgd_gray">'.$yd; if($holidays[$yokugetsu_ymd]){ echo '<div class="txt_red">'.$holidays[$yokugetsu_ymd].'</div>'; } echo '</td>'; $yd++; $yokugetsu++; $orikaesi++; $i++; if($orikaesi ==7){ echo "</tr><tr>"; //折り返し $orikaesi =0;//折り返しカウンタリセット } } echo "</tr>"; echo "</table>"; echo "</div>"; }</p> <p>?> </head> <body> <?php calendar(); ?> </body> </html>
見た目は、CSSファイル(calendar2.css)で調整しています。
場所は上記PHPファイル内で指定したところです。
@charset "utf-8";</p> <p>body { margin: 0px; padding: 0px; font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'MS Pゴシック', sans-serif; line-height: 100%; }</p> <p>.entry-title { font-weight: 400; font-size: 22px; }</p> <p>.calendar_box { height:100%; }</p> <p>.top_ctrl { margin-left:auto; margin-right:auto; text-align:left; }</p> <p>.calendar{ border: 0px #000000 solid; }</p> <p>.calendar th{ border: 0px #000000 solid; }</p> <p>.calendar td{ width: 155px; height: 40px; padding: 0px; border: 1px solid #ccc; border-color: #8ba2c1 #5890bf #4f93ca #768fa5; vertical-align: top; font: 600 12px/1 Lucida Sans, Verdana, sans-serif; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }</p> <p>.yobi { height: 18px; background: firebrick; border: 1px solid #ccc; color: #fff; font: 600 14px/1 Lucida Sans, Verdana, sans-serif; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }</p> <p>.y_red { background: firebrick; }</p> <p>.y_blue { background: navy; }</p> <p>.y_green { background: darkgreen; }</p> <p>.date_block { width: 155px; height: 40px; background: #cde; border: 1px solid #ccc; border-color: #8ba2c1 #5890bf #4f93ca #768fa5; vertical-align: top; font: 600 12px/1 Lucida Sans, Verdana, sans-serif; color: #000; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }</p> <p>.bkgd_gray { background: silver; color: gray; }</p> <p>.bkgd_today { background: gold; }</p> <p>.txt_today { height: 12px; color: #000; line-height: 12px; overflow: hidden; }</p> <p>.bkgd_green { background: lightgreen; }</p> <p>.txt_green { height: 12px; color: darkgreen; line-height: 12px; overflow: hidden; }</p> <p>.bkgd_red { background: pink; }</p> <p>.txt_red { height: 12px; color: crimson; line-height: 12px; overflow: hidden; }</p> <p>.bkgd_blue { background: #cde; }</p> <p>.txt_blue { height: 12px; color: navy; line-height: 12px; overflow: hidden; }