Laravel livewire＋ FullCalendar で非同期カレンダー作るんご①予定表示編

11342 ワード
livewire FullCalendar Laravel Laravel テキストリンク

はじめに

livewireで非同期カレンダー作りてえ！という事で
あんまり記事が無かったので書いてきます。

目次

  1. 環境構築
  2. カレンダー表示
  3. 予定を取得して表示
  4. 参考文献

環境構築

Laravel8をインストール。

composer create-project --prefer-dist laravel/laravel sample "8.*"

livewireをインストール、ついでにLaravel-AdminLTEも入れます。
 cd sample
sample> composer require livewire/livewire
sample> composer require jeroennoten/laravel-adminlte
sample> php artisan adminlte:install
sample> php artisan adminlte:install --only=main_views

config/adminlte.php内のlivewireを適応させます。

画面上部に@livewireStyleがテキストとして表示されてしまう場合は
resources/views/vendor/adminlte/master.blade.php内の
@livewireStyles
↓
@livewireStyles()

@livewireScripts
↓
@livewireScripts()
に書き換えます。

カレンダー表示

livewireファイルを作成します。

sample> php artisan make:livewire　Calendar/WireCalendar

AdminLTEのテンプレートを継承させて中身を入れたいセクションを指定します。
app/Http/Livewire/Calendar/WireCalendar.php

<?php

namespace App\Http\Livewire\Calendar;

use Livewire\Component;

class WireCalendar extends Component
{
    public function render()
    {
        return view('livewire.calendar.wire-calendar')
            ->extends('adminlte::page')
            ->section('content');
    }
}

CDNで必要なjsファイルやらcssを読み込んで何も無いカレンダーを表示させます。
resources/views/livewire/calendar/wire-calendar.blade.php

<div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/locales/ja.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/main.min.css">

    <div class="card">
        <div class="card-body">
            <div wire:ignore>
                <div id="calendar"></div>
            </div>
        </div>
    </div>
    <script>
        document.addEventListener('livewire:load', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                locale: 'ja',
            });
            calendar.render();
        });
    </script>
</div>

ルーティングを書き換えます
routes/web.php

//Route::get('/', function () {
//    return view('welcome');
//});

Route::get('/', \App\Http\Livewire\Calendar\WireCalendar::class);


カレンダーが表示されました。

予定を取得して表示

予定取得用のメソッドを作ります。
app/Http/Livewire/Calendar/WireCalendar.php

    public function getEvents()
    {
        $events = [
            [
                'title' => '予定1',
                'start' => '2022-01-05',
            ],
            [
                'title' => '予定2',
                'start' => '2022-01-07',
            ],
        ];
        return $events;
    }

resources/views/livewire/calendar/wire-calendar.blade.php
script部分に予定取得処理を書きます。

        document.addEventListener('livewire:load', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                locale: 'ja',
            });
            //↓追記
            calendar.addEventSource(@this.getEvents);

            calendar.render();
        });


予定が表示されました。

次は予定の登録とか書いていきます。

参考文献