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

# こっち見た方が良いです。新しい記事です
 https://qiita.com/sgrs38/items/16434cc7f3b2b55d7c3d

# はじめに
livewireで非同期カレンダー作りてえ！という事で
あんまり記事が無かったので書いてきます。
# 目次
<!-- タイトルとアンカー名を編集 -->
1. [環境構築](#環境構築)
1. [カレンダー表示](#カレンダー表示)
1. [予定を取得して表示](#予定を取得して表示)
1. [参考文献](#参考文献)

<!-- 各チャプター -->
<a id="#Chapter1"></a>
# 環境構築
Laravel8をインストール。
<pre>composer create-project --prefer-dist laravel/laravel sample "8.*"</pre>
livewireをインストール、ついでにLaravel-AdminLTEも入れます。
<pre> 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
</pre>
``config/adminlte.php``内のlivewireを適応させます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282328/6cba6620-94b0-9b0c-5b15-47220751536c.png)
画面上部に@livewireStyleがテキストとして表示されてしまう場合は
``resources/views/vendor/adminlte/master.blade.php``内の
<pre>@livewireStyles
↓
@livewireStyles()

@livewireScripts
↓
@livewireScripts()</pre>に書き換えます。

<a id="#Chapter2"></a>
# カレンダー表示
livewireファイルを作成します。
<pre>sample> php artisan make:livewire　Calendar/WireCalendar</pre>

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

```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``

```html:
<div>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/locales/ja.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/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``

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282328/017e472c-0748-bbf9-ddc8-ccc11690636f.png)
カレンダーが表示されました。
<a id="#Chapter3"></a>
# 予定を取得して表示
予定取得用のメソッドを作ります。
``app/Http/Livewire/Calendar/WireCalendar.php``

```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部分に予定取得処理を書きます。

```js:
        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();
        });
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/282328/de699c40-311d-6ca6-9699-39f0af2ce4f0.png)
予定が表示されました。

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

<a id="#reference"></a>
# 参考文献
- [livewire公式ドキュメント(英語しか無い)](https://laravel-livewire.com/docs/2.x/quickstart)
- [FullCalendarドキュメント(導入ページ)](https://fullcalendar.io/docs/initialize-globals)