高度(17) カレンダー(2)

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2025/04/30 05:18

高度(17) カレンダー(2)

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

https://www.php.net/manual/ja/function.date

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;
}