2019-03-23に更新

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

追記

雑に作っていたので、月末が日曜の場合にずれているようです。修正例を提供していただけたので貼っておきます。週や月の境界部分は試しづらく結構面倒で抜けがちになるので、ずれるとまずい場合は色々試してみてください。

D2RZxnmU0AMrbeZ.jpg

ツイッターでシェア
みんなに共有、忘れないようにメモ

だら@Crieit開発者

Crieitの開発者です。 Webエンジニアです(在宅)。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, React, Flutter, Vue.js, Node, RoR 趣味:Elixir, Phoenix, Nuxt, Express, GCP, AWS等色々 PHPフレームワークちいたんの作者

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント