【Laravel】FullCalendarをnpmで導入する方法

## はじめに
LaravelにFullCalendarを実装することになり、その記録を残す。
色々調べるも良い記事が出てこず（おそらく見ていた記事が古かった）、試行錯誤しながら最適なものを見つけ導入した。

[FullCalendarドキュメント](https://fullcalendar.io/)

### この記事でわかる・できること

- npmでのFullCalendarの実装


### 動作環境・使用するツールや言語

- OS バージョン
    - Windows11 23H2
- ツール
    - 例 VSCode
- フレームワーク
    - 例 Laravel8
- カレンダー
    - FullCalendar v6.1.15
- Node.js
    - v14

### 前提
- Laravelのセットアップは完了しているものとする。

- Node.jsインストール部分↓
```PHP:Dockerfile
RUN curl -sL https://deb.nodesource.com/setup_14.x | bash - && \
    apt-get install -y nodejs
```


## 方法
### FullCalendarインストール
まず、npmを使用して下記コマンドでインストール。
```ubuntu
 npm install --save \
  @fullcalendar/core \
  @fullcalendar/daygrid \
  @fullcalendar/timegrid \
  @fullcalendar/interaction \
  @fullcalendar/list
```
成功すると、src\package.jsonに下記が入力されている。
```PHP:package.json
"dependencies": {
    "@fullcalendar/core": "^6.1.15",
    "@fullcalendar/daygrid": "^6.1.15",
    "@fullcalendar/interaction": "^6.1.15",
    "@fullcalendar/list": "^6.1.15",
    "@fullcalendar/timegrid": "^6.1.15"
}
```

### 必要ファイルの設定
次にweb.php、コントローラー、ビューの設定。
```PHP:web.php
Route::get('/', [CalendarController::class, 'index'])->name('index');
```

```PHP:CalendarController.php
public function index()
{
    $events = [
        [
            'title' => 'All Day Event',
            'start' => '2024-07-01',
        ],
        [
            'title' => 'Long Event',
            'start' => '2024-07-07',
            'end' => '2024-07-10',
        ],
        [
            'groupId' => 999,
            'title' => 'Repeating Event',
            'start' => '2024-07-09T16:00:00',
        ],
        [
            'groupId' => 999,
            'title' => 'Repeating Event',
            'start' => '2024-07-16T16:00:00',
        ],
    ];

    return view('index', compact('events'));
}
```
※後の導入結果の画像と比べてデータ量少なくしています。

```HTML:views\index.blade.php
<body>
    <div id='calendar' data-events='@json($events)'></div>

    <script src="{{ mix('js/app.js') }}"></script> 
</body>
```

### jsのコード
```JavaScript:resource\js\calendar.js
import { Calendar } from '@fullcalendar/core';
import interactionPlugin from '@fullcalendar/interaction';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');

  if (!calendarEl) {
    return;
  }

  const events = JSON.parse(calendarEl.dataset.events);

  const calendar = new Calendar(calendarEl, {
    plugins: [ interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin ],
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
    },
    initialDate: '2024-07-27',
    navLinks: true,
    editable: true,
    dayMaxEvents: true,
    events,
  });

  calendar.render();
});
```

```JavaScript:resource\js\app.js
import './bootstrap';
import './calendar'; 
```

## 途中経過
ここまでいくと後は、ビルドしてサーバーを起動させればカレンダーが表示されるようだが、私の場合うまく表示されず・・・
その時のエラー文 ↓
``Mix マニフェストが存在しません。(ビュー: /var/www/resources/views/index.blade.php)``

Laravel Mix が生成したマニフェストファイルが見つからないことが原因とのこと。

## 改善
### １.依存関係を再インストール
node_modules が正しくセットアップされていない可能性があるため、下記コマンドを打つ。
```
docker-compose exec php npm install
```

### ２.webpack.mix.jsファイルの修正
```JavaScript:webpack.mix.js
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css');
```

### 上記二点後、ビルド
```
docker-compose exec php npm run dev
```

## 結果
私の場合はこれで導入できました！！
（色々いじっていたので、足りないところや余分なところあったら申し訳ない）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3669894/3fbb2bf9-a560-b7b8-9207-71d84e35c797.png)

## 参考資料
https://rensaba-programer.jp/2024/01/13/laravel%E3%81%A8fullcalendar%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC%E6%A9%9F%E8%83%BD%E3%81%AE%E5%AE%9F%E8%A3%85-ui%E3%81%AE%E5%90%91%E4%B8%8A%E3%81%8C/