PHP カレンダー 翌月や先月も表示

20130326a前回までのカレンダーは日曜始まりでしたが、今回は月曜始まりに変更。

また、年と月を選択リストにし、直接見たいところへ移動可能に。

左の「<<」ボタンで前月を、右の「>>」ボタンで翌月を表示可能に。

「今月」ボタンを押すと、即座に今月の表示に戻ります。

祝日のデータは、Googleカレンダーから取得したものです。前回は2012年からのデータしか無かったのですが、本日試したら、2010から2016年までの祝日データが取れました。・・・これを元にソース上の連想配列に・・・。

今回は以下のサイトを参考にさせていただきました。
PHPでカレンダー作成(翌月や先月も表示できるタイプ)



HTMLファイル(test_calendar2.html)からインラインフレーム内に呼び出してみました。

&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;title&gt;カレンダー&lt;/title&gt;
&lt;meta charset="UTF-8"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div align="center"&gt;
&lt;iframe frameborder=0 width=400px height=400px src="cgi-bin/calendar/calendar2.php"&gt;&lt;/iframe&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

カレンダーを表示するPHPファイル(calendar2.php)には、祝日の連想配列 $holidays を入れたので長くなりました。

場所は、上記HTMLファイル内で指定したところです。

&lt;?php
session_start(); //ページの最初に呼び出す
?&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang="ja"&gt;
&lt;head&gt;
&lt;title&gt;カレンダー&lt;/title&gt;
&lt;meta charset="UTF-8"&gt;
&lt;link rel="stylesheet" href="../../_shared/css/calendar2.css"&gt;</p>

<p>&lt;?php
$h_start_year = 2010;
$h_end_year = 2016;
$holidays = array(
"20100101" =&gt; "元日",
"20100111" =&gt; "成人の日",
"20100211" =&gt; "建国記念の日",
"20100321" =&gt; "春分の日",
"20100322" =&gt; "振替休日",
"20100429" =&gt; "昭和の日",
"20100503" =&gt; "憲法記念日",
"20100504" =&gt; "みどりの日","20100505" =&gt; "こどもの日",
"20100719" =&gt; "海の日",
"20100920" =&gt; "敬老の日",
"20100923" =&gt; "秋分の日",
"20101011" =&gt; "体育の日",
"20101103" =&gt; "文化の日",
"20101123" =&gt; "勤労感謝の日",
"20101223" =&gt; "天皇誕生日",
"20101224" =&gt; "振替休日",
"20110101" =&gt; "元日",
"20110110" =&gt; "成人の日",
"20110211" =&gt; "建国記念の日",
"20110321" =&gt; "春分の日",
"20110429" =&gt; "昭和の日",
"20110503" =&gt; "憲法記念日",
"20110504" =&gt; "みどりの日",
"20110505" =&gt; "こどもの日",
"20110718" =&gt; "海の日",
"20110919" =&gt; "敬老の日",
"20110923" =&gt; "秋分の日",
"20111010" =&gt; "体育の日",
"20111103" =&gt; "文化の日",
"20111123" =&gt; "勤労感謝の日",
"20111223" =&gt; "天皇誕生日",
"20120101" =&gt; "元日",
"20120102" =&gt; "振替休日",
"20120109" =&gt; "成人の日",
"20120211" =&gt; "建国記念の日",
"20120320" =&gt; "春分の日",
"20120429" =&gt; "昭和の日",
"20120430" =&gt; "振替休日",
"20120503" =&gt; "憲法記念日",
"20120504" =&gt; "みどりの日",
"20120505" =&gt; "こどもの日",
"20120716" =&gt; "海の日",
"20120917" =&gt; "敬老の日",
"20120922" =&gt; "秋分の日",
"20121008" =&gt; "体育の日",
"20121103" =&gt; "文化の日",
"20121123" =&gt; "勤労感謝の日",
"20121223" =&gt; "天皇誕生日",
"20121224" =&gt; "振替休日",
"20130101" =&gt; "元日",
"20130114" =&gt; "成人の日",
"20130211" =&gt; "建国記念の日",
"20130320" =&gt; "春分の日",
"20130429" =&gt; "昭和の日",
"20130503" =&gt; "憲法記念日",
"20130504" =&gt; "みどりの日",
"20130505" =&gt; "こどもの日",
"20130506" =&gt; "振替休日",
"20130715" =&gt; "海の日",
"20130916" =&gt; "敬老の日",
"20130923" =&gt; "秋分の日",
"20131014" =&gt; "体育の日",
"20131103" =&gt; "文化の日",
"20131104" =&gt; "振替休日",
"20131123" =&gt; "勤労感謝の日",
"20131223" =&gt; "天皇誕生日",
"20140101" =&gt; "元日",
"20140113" =&gt; "成人の日",
"20140211" =&gt; "建国記念の日",
"20140321" =&gt; "春分の日",
"20140429" =&gt; "昭和の日",
"20140503" =&gt; "憲法記念日",
"20140504" =&gt; "みどりの日",
"20140505" =&gt; "こどもの日",
"20140506" =&gt; "振替休日",
"20140721" =&gt; "海の日",
"20140915" =&gt; "敬老の日",
"20140923" =&gt; "秋分の日",
"20141013" =&gt; "体育の日",
"20141103" =&gt; "文化の日",
"20141123" =&gt; "勤労感謝の日",
"20141124" =&gt; "振替休日",
"20141223" =&gt; "天皇誕生日",
"20150101" =&gt; "元日",
"20150112" =&gt; "成人の日",
"20150211" =&gt; "建国記念の日",
"20150321" =&gt; "春分の日",
"20150429" =&gt; "昭和の日",
"20150503" =&gt; "憲法記念日",
"20150504" =&gt; "みどりの日",
"20150505" =&gt; "こどもの日",
"20150506" =&gt; "振替休日",
"20150720" =&gt; "海の日",
"20150921" =&gt; "敬老の日",
"20150922" =&gt; "国民の休日",
"20150923" =&gt; "秋分の日",
"20151012" =&gt; "体育の日",
"20151103" =&gt; "文化の日",
"20151123" =&gt; "勤労感謝の日",
"20151223" =&gt; "天皇誕生日",
"20160101" =&gt; "元日",
"20160111" =&gt; "成人の日",
"20160211" =&gt; "建国記念の日",
"20160320" =&gt; "春分の日",
"20160321" =&gt; "振替休日",
"20160429" =&gt; "昭和の日",
"20160503" =&gt; "憲法記念日",
"20160504" =&gt; "みどりの日",
"20160505" =&gt; "こどもの日",
"20160718" =&gt; "海の日",
"20160919" =&gt; "敬老の日",
"20160922" =&gt; "秋分の日",
"20161010" =&gt; "体育の日",
"20161103" =&gt; "文化の日",
"20161123" =&gt; "勤労感謝の日",
"20161223" =&gt; "天皇誕生日",
);</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"]&lt;=($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"]&gt;=($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&lt;&lt;&lt;EOT
&lt;h1 class="entry-title"&gt;カレンダー&lt;/h1&gt;
&lt;div class="calendar_box"&gt;
&lt;div style="text-align:center;"&gt;
&lt;div style="margin-left:auto; margin-right:auto;"&gt;</p>

<p>&lt;form action="" method="post"&gt;</p>

<p>&lt;input type="submit" name="sengetu" value="&lt;&lt;"&gt;</p>

<p>&lt;input type="hidden" name="nen" value="{$_SESSION["nen"]}"&gt;
&lt;input type="hidden" name="tuki" value="{$_SESSION["tuki"]}"&gt;</p>

<p>&lt;select name="year" onChange="submit()"&gt;
EOT;</p>

<p>for ($i = 2010; $i &lt;= 2016; $i++) {
echo "&lt;option value='".$i."'";
if ($i == $_SESSION["nen"]) echo " selected";
$di = mb_convert_kana($i,A,"UTF8");
echo "&gt;".$di."年&lt;/option&gt;\n";
}</p>

<p>echo&lt;&lt;&lt;EOT
&lt;/select&gt;
&lt;select name="month" onChange="submit()"&gt;
EOT;</p>

<p>for ($i = 1; $i &lt;= 12; $i++) {
echo "&lt;option value='".$i."'";
if ($i == $_SESSION["tuki"]) echo " selected";
$di = mb_convert_kana($i,A,"UTF8");
echo "&gt;".$di."月&lt;/option&gt;\n";
}</p>

<p>echo&lt;&lt;&lt;EOT
&lt;/select&gt;</p>

<p>&lt;input type="submit" name="raigetu" value="&gt;&gt;"&gt;</p>

<p>&lt;input type="submit" name="kongetu" value="今月"&gt;</p>

<p>&lt;/form&gt;</p>

<p>&lt;/div&gt;
&lt;/div&gt;
&lt;table class="calendar"&gt;
&lt;tr&gt;
&lt;th class="yobi y_blue"&gt;月&lt;/th&gt;
&lt;th class="yobi y_blue"&gt;火&lt;/th&gt;
&lt;th class="yobi y_blue"&gt;水&lt;/th&gt;
&lt;th class="yobi y_blue"&gt;木&lt;/th&gt;
&lt;th class="yobi y_blue"&gt;金&lt;/th&gt;
&lt;th class="yobi y_green"&gt;土&lt;/th&gt;
&lt;th class="yobi y_red"&gt;日&lt;/th&gt;
&lt;/tr&gt;
&lt;tr&gt;
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&lt;=$start_youbi ; $i++){
$zengetsu_ymd = date("Ymd",mktime(0,0,0,$zm,$zd,$zy));
echo '&lt;td class="bkgd_gray"&gt;'.$zd;
if($holidays[$zengetsu_ymd]){
echo '&lt;div class="txt_red"&gt;'.$holidays[$zengetsu_ymd].'&lt;/div&gt;';
}
echo '&lt;/td&gt;';
$zd++;
$zengetsu++;
$orikaesi++;
}
}
while($cnt&lt;=$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 '&lt;td class="date_block '.$td.'"&gt;&lt;div class="'.$td_txt.' '.$today_c.'"&gt;'.$cnt.'&lt;/div&gt;';
if($holidays[date("Ymd", mktime(0, 0, 0, $m, $cnt, $y))]){
echo '&lt;div class="'.$td_txt.'"&gt;'.$holidays[date("Ymd",mktime(0,0,0,$m,$cnt,$y))].'&lt;/div&gt;';
}
echo '&lt;/td&gt;';
$kongetsu++;
$cnt++;
$orikaesi++;
if($orikaesi ==7){ echo "&lt;/tr&gt;&lt;tr&gt;\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&lt;$e){
$yokugetsu_ymd = date("Ymd",mktime(0,0,0,$ym,$yd,$yy));
echo '&lt;td class="bkgd_gray"&gt;'.$yd;
if($holidays[$yokugetsu_ymd]){
echo '&lt;div class="txt_red"&gt;'.$holidays[$yokugetsu_ymd].'&lt;/div&gt;';
}
echo '&lt;/td&gt;';
$yd++;
$yokugetsu++;
$orikaesi++;
$i++;
if($orikaesi ==7){
echo "&lt;/tr&gt;&lt;tr&gt;"; //折り返し
$orikaesi =0;//折り返しカウンタリセット
}
}
echo "&lt;/tr&gt;";
echo "&lt;/table&gt;";
echo "&lt;/div&gt;";
}</p>

<p>?&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;?php calendar(); ?&gt;
&lt;/body&gt;
&lt;/html&gt;

見た目は、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;
}