【PHP-Laravel】カレンダーを作ってみる（View側：7列のグリッドレイアウト）

今回はLaravelに関して書いていきます。

以前もLaravelに関する記事を書いています（以下リンク）。

miya-moto-memo.hatenablog.com

上記の記事で、CarbonPeriodを活用したカレンダーについて書いています。
プログラムも載せていますが、プログラムの具体的な説明はしませんでした。

今回の記事で、View側の実装について具体的に説明してみます。

それでは本題へ。

実行環境
完成図
プログラム（View）
- calendar.css
- calendar.blade.php
プログラムのポイント
- 7列（1週間）のグリッドレイアウト
- 前月・当月・翌月のループは別々で
おわりに
関連記事

実行環境

実行環境は、

PHP 8.2.12
Laravel Framework 11.10.0
nesbot/carbon 3.5.0

です。

完成図

まずは完成図を載せておきます。
前回の記事でも載せましたが、改めて。

プログラム（View）

View側のプログラムは以下の通りです。
こちらも前回の記事で載せましたが、改めて。

calendar.css

.container {
    width: 720px;
    margin: 0 auto;
}
.header {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}
.header > a {
    text-decoration: none;
}
.header > div {
    font-weight: bold;
}
.grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.weekday {
    text-align: center;
}
.day {
    text-align: center;
    border: 1px solid #eee;
    padding: 10px;
}
.this-month {
    color: #111;
}
.not-this-month {
    color: #ccc;
}

calendar.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>カレンダー</title>
    <link rel="stylesheet" href="{{ asset('/css/calendar.css')  }}" >
</head>
<body>
    <div class="container">
        <div class="header">
            <a href="{{ url()->current() . '?year=' . $previousMonth->format('Y') . '&month=' . $previousMonth->format('m') }}">前月</a>
            <div>{{ $thisMonth->format('Y年m月') }}</div>
            <a href="{{ url()->current() . '?year=' . $nextMonth->format('Y') . '&month=' . $nextMonth->format('m') }}">翌月</a>
        </div>
        <div class="grid">
            {{-- 曜日 --}}
            @foreach(['日', '月', '火', '水', '木', '金', '土'] as $weekday)
                <div class="weekday">{{ $weekday }}</div>
            @endforeach
            {{-- 前月の期間 --}}
            @foreach ($previousMonthPeriod as $value)
                <div class="day not-this-month">{{ $value->format('j') }}</div>
            @endforeach
            {{-- 当月の期間 --}}
            @foreach ($thisMonthPeriod as $value)
                <div class="day this-month">{{ $value->format('j') }}</div>
            @endforeach
            {{-- 翌月の期間 --}}
            @foreach ($nextMonthPeriod as $value)
                <div class="day not-this-month">{{ $value->format('j') }}</div>
            @endforeach
        </div>
    </div>
</body>
</html>

プログラムのポイント

プログラムの中からポイントとなる部分をピックアップして説明していきます。

7列（1週間）のグリッドレイアウト

7列（1週間）のグリッドレイアウトにしています。

.grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

上記CSSによって7等分されたレイアウトを組むことが出来ます。
「ループを7の倍数で折り返して…」といった制御をする必要がなくなります。

詳しくは以下記事にて。
developer.mozilla.org

前月・当月・翌月のループは別々で

「前月の期間」「当月の期間」「翌月の期間」でそれぞれループ処理しています。

{{-- 前月の期間 --}}
@foreach ($previousMonthPeriod as $value)
    <div class="day not-this-month">{{ $value->format('j') }}</div>
@endforeach
{{-- 当月の期間 --}}
@foreach ($thisMonthPeriod as $value)
    <div class="day this-month">{{ $value->format('j') }}</div>
@endforeach
{{-- 翌月の期間 --}}
@foreach ($nextMonthPeriod as $value)
    <div class="day not-this-month">{{ $value->format('j') }}</div>
@endforeach