【PHP】 お手軽カレンダー作成 その２【忘備録】

2017/6/10 php

php_logo

前回は日めくり風の年月日の表示まで完成しました。今回は、そこに曜日を追加していきます。

ちなみに、PHPをテストするにあたっては、instantWPというのを使用しております。

手軽にローカルでPHP動作確認～InstantWordPress～
手軽にローカルでPHP動作確認～InstantWordPress～
ローカルでのPHP開発といえばXampp web系の開発、ページのコーディングとかしている際、ローカルでPHPを動かすためのセッティン...
tks-kan.com
スポンサーリンク

date()関数での曜日処理について

date()関数での曜日取得は数字に変換されています。日曜日が0で土曜日が6という感じ。

<?php
echo date("Y-m-d")."→".date("w");
?>

この数字を曜日に変換してあげたい。ということで、配列を利用してあげましょう。weekという名前の変数で0～6に対応する形で曜日を格納してあげます。で、その数字を利用して曜日を取り出してあげるようにすれば、変換完成！

<?php
$week = array("日","月","火","水","木","金","土");
echo date("Y-m-d")."→".$week[date("w")];
?>

無事日曜日の「日」が表示されました。

日めくりカレンダーに曜日を追加

前回のコードに曜日の処理を追加しますが、まずはhtmlで書いてみます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>calendar</title>
    <link rel="stylesheet" href="">
    <style>
    /*ここにスタイルを記述*/
        body {
            width: 275px;
        }
        .top {
            border-bottom: 2px solid gray;
        }
        .top, .day {
            display: flex;
            align-items: flex-end;
        }
        .day {
            justify-content: center;
        }
        .mm {
            width: 50px;
            font-size: 40px;
            font-weight: bold;
        }
        .eng_m {
            font-size: 25px;
            font-weight: bold;
            color: blue;
        }
        .YYYY {
            width: 200px;
            text-align: right;
            font-size: 25px;
        }
        .week{
            margin-top: 16px;
            text-align: center;
            font-size: 25px;
        }
        .dd {
            font-size: 150px;
        }
        .nichi {
            font-size: 60px;
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="mm"><?php echo date("m"); ?></div>
        <div class="eng_m"><?php echo date("M"); ?></div>
        <div class="YYYY"><?php echo date("Y"); ?></div>
    </div>
    <div class="week">日曜日</div>
    <div class="day">
        <div class="dd"><?php echo date("j"); ?></div>
        <div class="nichi">日</div>
    </div>
</body>
</html>

いい感じになってきました。では、曜日部分にphpを組み込みましょう。

    <div class="week">日曜日</div>

これを

    <?php $week = array("日","月","火","水","木","金","土"); ?>
    <div class="week"><?php echo $week[date("w")]; ?>曜日</div>

に置き換えてあげると…

ちゃんと日曜日の表示ができました。

土曜日と日曜日の色を変えてみる

カレンダー上での土曜日や日曜日といえば、色が青だったり赤だったりしますよね。ということで、それもphpで処理してみたいと思います。やり方としては土曜日の時にはcssで青を、日曜日の時には赤を指定してあげればいいはずです。なのでこんなコードを考えてみました。

.week, .day {
    <?php
        if (date("w") == 0) { echo "color: red;"; }
        if (date("w") == 6) { echo "color: blue;"; }
    ?>
}

これをスタイル記述のところに突っ込んであげると

ちゃんと日曜日に赤い表示になりました。

日めくりカレンダー完成　～全コード～

簡単カレンダーの日めくりカレンダーはこれで完成です。もし、日付がずれて表示されたりしている場合は、タイムゾーンがあっていない可能性があります。php.iniファイルなどの設定を確認してみてください。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>calendar</title>
    <link rel="stylesheet" href="">
    <style>
    /*ここにスタイルを記述*/
        body {
            width: 275px;
            margin: 25px auto 0;
        }
        .top {
            border-bottom: 2px solid gray;
        }
        .top, .day {
            display: flex;
            align-items: flex-end;
        }
        .day {
            justify-content: center;
        }
        .mm {
            width: 50px;
            font-size: 40px;
            font-weight: bold;
        }
        .eng_m {
            font-size: 25px;
            font-weight: bold;
            color: blue;
        }
        .YYYY {
            width: 200px;
            text-align: right;
            font-size: 25px;
        }
        .week{
            margin-top: 16px;
            text-align: center;
            font-size: 25px;
        }
        .dd {
            font-size: 150px;
        }
        .nichi {
            font-size: 60px;
        }
        .week, .day {
        <?php 
            if (date("w") == 0) { echo "color: red;"; }
            if (date("w") == 6) { echo "color: blue;"; }
         ?>
        }
    </style>
</head>
<body>
    <div class="top">
        <div class="mm"><?php echo date("m"); ?></div>
        <div class="eng_m"><?php echo date("M"); ?></div>
        <div class="YYYY"><?php echo date("Y"); ?></div>
    </div>
    <?php $week = array("日","月","火","水","木","金","土"); ?>
    <div class="week"><?php echo $week[date("w")]; ?>曜日</div>
    <div class="day">
        <div class="dd"><?php echo date("j"); ?></div>
        <div class="nichi">日</div>
    </div>
</body>
</html>

まとめ　～次回は一か月の日付を表示するカレンダーに挑戦

お手軽カレンダーということで、今日の日付を表示する日めくりカレンダーを作成してみました。だいぶんそれっぽく出来たのではないでしょうか。phpでの日付関連の処理date()関数を使用することでお手軽に作成できます。是非、コピペで試してみてください。