PHPでカレンダーを実装する

この記事では、PHPでカレンダーを作成する方法について解説していきます。

以下のデモページで、実際に動作するカレンダーが見られます。
現在の月を表示し、月を選択して移動することができるシンプルなカレンダーです。

https://calendar-404206.an.r.appspot.com/

ソースコードは以下のようになっています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>カレンダー</title>
</head>
<?php
$timestamp = filter_input( INPUT_GET, 'month', FILTER_CALLBACK, [ 'options' => 'strtotime' ] ) ?: strtotime( 'first day of this month' );
?>
<body>
    <h1>カレンダー</h1>

    <div class="calendar">
        <div class="nav">
            <form action="/">
                <input type="month" name="month" value="<?php echo date( 'Y-m', $timestamp ); ?>">
                <button>移動</button>
            </form>
        </div>
        <table>
            <thead>
                <tr>
                    <th>日</th>
                    <th>月</th>
                    <th>火</th>
                    <th>水</th>
                    <th>木</th>
                    <th>金</th>
                    <th>土</th>
                </tr>
            </thead>
            <tbody>
                <?php
                    $lastday = date( 't', $timestamp );
                    $sunday = 1 - date( 'w', $timestamp );
                    while ( $sunday <= $lastday ) {
                        echo '<tr>';
                        $day = $sunday;
                        $sunday += 7;
                        while ( $day < $sunday ) {
                            echo '<td>';
                            if ( $day >= 1 && $day <= $lastday ) {
                                echo $day;
                            }
                            echo '</td>';
                            $day++;
                        }
                        echo '</tr>', PHP_EOL;
                    }
                ?>
            </tbody>
        </table>
    </div>
</body>
</html>

では、ソースコードの各部分について詳しく見ていきましょう。
まず、HTMLのヘッド部分では、文字コードやビューポート、タイトルなどを指定しています。
これは通常のHTMLページと同じです。

次に、PHPのコードが始まります。
ここでは、GETパラメータで指定された月のタイムスタンプを取得します。
GETパラメータで指定された月のタイムスタンプがない場合は、今月のタイムスタンプをデフォルト値として使用します。
これを$timestamp変数に代入します。

次に、HTMLのボディ部分に移ります。
ここでは、見出しとして<h1>カレンダー</h1>を表示します。

次に、カレンダーのメイン部分を<div class="calendar">で囲みます。
この中には、ナビゲーション部分とテーブル部分があります。

ナビゲーション部分は<div class="nav">で囲みます。
ここでは、フォームを使って月を選択できるようにします。
フォームの中には、<input type="month">というタイプの入力欄と、<button>移動</button>というボタンがあります。
入力欄のname属性はmonthにし、value属性には現在の月をdate( 'Y-m', $timestamp )で表示します。
これにより、ユーザーが月を選択して移動ボタンを押すと、GETパラメータで月が送信されます。

テーブル部分は<table>で作ります。
テーブルの中には、見出し行と本体行があります。

見出し行は<thead>で囲みます。
ここでは、日曜日から土曜日までの曜日を<th>で表示します。

本体行は<tbody>で囲みます。
ここでは、PHPのコードを使ってカレンダーの日付を生成します。

まず、指定された月の最終日をdate( 't', $timestamp )で取得し、$lastday変数に代入します。
次に、指定された月の最初の日曜日の日付を計算します。
これは、1から指定された月の1日の曜日番号(0が日曜日)を引くことで求められます。
これを$sunday変数に代入します。

次に、whileループを使ってカレンダーの行を生成します。
ループの条件は、日曜日の日付が最終日以下であることです。
ループ内では、まず<tr>で行を開始します。
次に、$day変数に日曜日の値を代入し、その値から7を足して次の日曜日の値を計算し、それを再び$sunday変数に代入します。
これにより、次回のループでは次の週の行が生成されます。

次に、whileループを使ってカレンダーの列(セル)を生成します。
ループの条件は、現在の日が次の日曜日未満であることです。
ループ内では、まず<td>でセルを開始します。
次に、現在の日が1以上かつ最終日以下であるかどうか判定します。
これは、指定された月以外の日付(前月や翌月)を表示しないためです。
もし条件が真ならば、現在の日をセル内に表示します。
最後に、セルを閉じるために</td>を出力し、現在の日に1を足して更新します。

これで一週間分(7列分)のセルが生成されました。
最後に、行を閉じるために</tr>と改行を出力します。

これでカレンダーの本体部分が完成しました。
最後に、HTMLの閉じタグを出力してページを終了します。

以上が、PHPでカレンダーを作成する方法の解説でした。
このカレンダーはシンプルですが、必要な機能は備えています。
もちろん、デザインや機能は自由にカスタマイズできます。
ぜひ、参考にしてみてください。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です