前回までのカレンダーは日曜始まりでしたが、今回は月曜始まりに変更。
また、年と月を選択リストにし、直接見たいところへ移動可能に。
左の「<<」ボタンで前月を、右の「>>」ボタンで翌月を表示可能に。
「今月」ボタンを押すと、即座に今月の表示に戻ります。
祝日のデータは、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;
}