4/4
銀閣寺道交差点
白川通と今出川の交差点
京都銀行の向かい
17系統がはやい 銀閣寺道交差点で降りる
地下鉄は烏丸今出川
203をつかって銀閣寺道交差点
style.css
body{
background-color:#cff;
}
#container{
width: 80%;
background: #fff;
margin: auto;
}
#calendar{
display: flex;
flex-wrap: wrap;
}
#calendar div{
width: 14.2857%;
}
罫線を入れたいのでボックスサイジングを入れておく
#calendar div{
width: 14.2857%;
box-sizing: border-box;
border: solid 1px #ccc;
}
月曜始まりにしますよ
さてどこから始めるかが月によって違う
date関数を使う
<?php
echo date("t");
?>
date("t");
その月が何日あるかのパラメータ
本当は第2引数で日付を入れるが、省略すると「現在の月の最大日数」を返す
php manual
dにすれば、「今日が何日か」
wだと「曜日番号（指定した日付が何曜日か）
ただし日付を省略すると「今日が何曜日か」
0 (日曜)から 6 (土曜)
たとえば4月は何日あるのか？
<?php
echo date("t",mktime(0,0,0,4,1,2020));//何時何分何秒は0でいい何月何日何年を記述
?>
未来分も過去もできるのでいわゆる万年カレンダーができる
でもスタートが常に月曜だとよろしくない
水曜始まりだったら余分なスペースをあらかじめ出力する必要がある
水曜はじまりの今年の4月をモデルにする
//この回数だけループすればいい
$last_day = date("t",mktime(0,0,0,4,1,2020));//何時何分何秒は0でいい、何月何日何年を記述
//echo $last_day;
//1日は何曜日なのか
$first_week = date("w",mktime(0,0,0,4,1,2020));
echo $first_week;
出力結果：3
すなわち水曜
つまり月、火は空白のdivにしたい
→ループ処理の前にもう一回ループ処理をしておく必要がある
いま$first_weekは3（水曜）
2マス空白を出力したい
3からはじめて減らしていき1より大きくなったらとまるループ
//余白を出力
<?php for ($i=$first_week; $i>1; $i--): ?>
<div></div>
<?php endfor; ?>
しかしこれで3月（日曜始まり）でやるとまずいことになる
なぜか月曜から始まる
→$i=$first_weekが0になるので
一度も吐き出さなくなってしまう
これが｢月曜始まりカレンダーで日曜始まりの月｣の出力の難しいところ
<!--日曜始まりの特殊ルール-->
<?php if($first_week==0) $first_week=7; ?>
日曜始まりの時は変数を7にしてやる
何月かはgetで渡したいですよ
http://localhost/php/makino/calendar/?y=2020&m=5
をURLにいれる
PHPマニュアルを見ろ
<?php
if(empty($_GET["y"]) || empty($_GET["m"])){
$m = date("n");//今日現在が所属している年と月にする、そうでなければ指定値
$y = date("Y");//大文字のＹ
}else{
$m=intval($_GET["m"]);
$y=intval($_GET["y"]);
}
?>
よってnとYを「ないとき」の条件で使う
指定があるときはmとy
ややこしいな
ここまで
--->index.php
<?php
if(empty($_GET["y"]) || empty($_GET["m"])){
$m = date("n");//今日現在が所属している年と月にする、そうでなければ指定値
$y = date("Y");
}else{
$m=intval($_GET["m"]);
$y=intval($_GET["y"]);
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>カレンダー</title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=M+PLUS+Rounded+1c&display=swap" rel="stylesheet">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="container">
<?php
//この回数だけループすればいい
$last_day = date("t",mktime(0,0,0,$m,1,$y));//何時何分何秒は0でいい、何月何日何年を記述
//echo $last_day;
//1日は何曜日なのか
$first_week = date("w",mktime(0,0,0,$m,1,$y));//曜日番号
//echo $first_week;
?>
<div id="calendar">
<div class="head">月</div>
<div class="head">火</div>
<div class="head">水</div>
<div class="head">木</div>
<div class="head">金</div>
<div class="head bg_blue">土</div>
<div class="head bg_red">日</div>
<!--日曜始まりの特殊ルール-->
<?php if($first_week==0) $first_week=7; ?>
<!--余白を出力-->
<?php for ($i=$first_week; $i>1; $i--): ?>
<div></div>
<?php endfor; ?>
<?php for($i=1; $i<=$last_day; $i++): ?>
<div><?php echo $i; ?></div>
<?php endfor; ?>
</div>
</div>
<script src="js/calendar.js"></script>
</body>
</html>
--->style.css
body{
background-color:#ffe45e;
color: #333;
font-family: 'M PLUS Rounded 1c', sans-serif;
}
#container{
width: 80%;
background: #fff;
margin: auto;
}
#calendar{
display: flex;
flex-wrap: wrap;
}
#calendar div{
width: 14.2857%;
box-sizing: border-box;
border: solid 1px #ccc;
text-align: right;
padding-bottom: 2rem;
padding-top:0.3rem;
padding-right:0.3rem;
}
#calendar div.head{
padding:0.2rem;
text-align: center;
}
.bg_blue{
background-color: #eef;
}
.bg_red{
background-color: #fee;
}
