2018-10-31に更新

Laravel+Carbonでカレンダーの作り方

LaravelにはCarbonという日時を扱うためのライブラリが入っています。そのためLaravelで日時を扱う場合はPHPのdate関数などを使うのではなく、Carbonを使うのがスタンダードです。

カレンダーも簡単に作れるので、作り方を紹介します。

Carbonをuse

use Carbon\Carbon;

カレンダーのデータを作成

テンプレートに渡すために、カレンダーのデータを生成するためのメソッドを作成します。

    public function getCalendarDates($year, $month)
    {
        $dateStr = sprintf('%04d-%02d-01', $year, $month);
        $date = new Carbon($dateStr);
        // カレンダーを四角形にするため、前月となる左上の隙間用のデータを入れるためずらす
        $date->subDay($date->dayOfWeek);
        // 同上。右下の隙間のための計算。
        $count = 31 + $date->dayOfWeek;
        $count = ceil($count / 7) * 7;
        $dates = [];

        for ($i = 0; $i < $count; $i++, $date->addDay()) {
            // copyしないと全部同じオブジェクトを入れてしまうことになる
            $dates[] = $date->copy();
        }
        return $dates;
    }

ちなみにこのメソッドをモデルに作成する際、メソッド名がgetDatesだとモデルのメソッドをオーバーライドしてしまいエラーが出たので気をつけましょう。

カレンダーを表示する

前述のデータをテンプレートに渡し、カレンダの表示を作成します。デザインにはBootstrapを使っています。

<table class="table table-bordered">
  <thead>
    <tr>
      @foreach (['日', '月', '火', '水', '木', '金', '土'] as $dayOfWeek)
      <th>{{ $dayOfWeek }}</th>
      @endforeach
    </tr>
  </thead>
  <tbody>
    @foreach ($dates as $date)
    @if ($date->dayOfWeek == 0)
    <tr>
    @endif
      <td
        @if ($date->month != $currentMonth)
        class="bg-secondary"
        @endif
      >
        {{ $date->day }}
      </td>
    @if ($date->dayOfWeek == 6)
    </tr>
    @endif
    @endforeach
  </tbody>
</table>

あとは色味やセルの縦幅などを調整するとよいでしょう。

Laravel.png


dala00

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年程。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel5, CakePHP3, JavaScript, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, Vue等色々

Crieitはαバージョンで開発中です。進捗は公式Twitterアカウントをフォローして確認してください。 興味がある方は是非記事の投稿もお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか
関連記事

コメント