こっち見た方が良いです。新しい記事です
はじめに
livewireで非同期カレンダー作りてえ！という事で
あんまり記事が無かったので書いてきます。
目次
環境構築
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/WireCalendarAdminLTEのテンプレートを継承させて中身を入れたいセクションを指定します。
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/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
//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();
});
予定が表示されました。
次は予定の登録とか書いていきます。