Laravelでカレンダーをモーダルとして表示させます。
その時保存済みのイベントを呼び出してカレンダーの該当する日付に表示させましょう。
では早速やっていきましょう！
FullCalendarというオープンソースのjavascriptライブラリを使用していきます！
まず初めに完成形を載せます
1.DBを用意して、ルーティングなど設定しておきます
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\EventCalendarController; //使用するコントローラー
// http://127.0.0.1:8000/calendarにアクセスしたときの画面
Route::get('/calendar', function () {
// ↓calendar.blade.phpとします
return view('calendar');
});
// データの取得は この↓コントローラーの この↓メソッドから
Route::get('/events', [EventCalendarController::class, 'getEvents']);
2.今回はcalendar.blade.phpにjsまで全て書いてしまいます
モーダルの書き方はbootstrapそのままです（https://getbootstrap.jp/docs/5.3/components/modal/）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>カレンダーデモ</title>
<!-- 必要なCSSをインポートします -->
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.0/main.min.css" rel="stylesheet" />
<!-- Bootstrap（モーダル用）-->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- jQueryとFullCalendarのためのJSをインポートします -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.0/main.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- カレンダー（モーダル）を開くためのボタン -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#calendarModal">
カレンダーを表示
</button>
<!-- カレンダー本体 -->
<div class="modal fade" id="calendarModal" tabindex="-1" aria-labelledby="calendarModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="calendarModalLabel">カレンダーのタイトル</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- ↓カレンダー表示に必要なのはこれだけ！ -->
<div id="calendar"></div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
// カレンダーが表示された時にFullCalendarを初期化
$('#calendarModal').on('shown.bs.modal', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prev,',
center: 'title',
right: 'next',
},
height: 'auto', // カレンダーの高さを自動調節してくれます
events: function(info, successCallback, failureCallback) {
// バックエンドからイベントデータを取得
$.ajax({
url: '/events', // web.phpで指定したルートの呼び出し
type: 'GET',
success: function(response) {
const formattedEvents = response.map(event => ({
title: event.events, // eventsの文字列をタイトルとして使用
start: event.date, // 日付を開始日として使用
}));
successCallback(formattedEvents); // FullCalendarにイベントデータを渡す
},
error: function() {
failureCallback('イベントの読み込みに失敗しました');
}
});
}
});
// カレンダーを描画
calendar.render();
});
});
</script>
</body>
</html>
3.ボタン押下→カレンダーをイベント内容とともに表示
↓
テーブルに保存されている内容がカレンダーにイベントが表示されていることを確認します
ここで気になるのはもっと見やすく、使いやすくカスタマイズできるのか？でしょう
4.ということでカスタマイズしていきます
・翌月、前月のボタンのテキストは変えられますか？
buttonTextで設定ができます
buttonText: { prev: '次！', next: '前！', },
・表示するカレンダーの範囲を制限したいです
validRangeで設定できます(公式ドキュメントでうまくいかなかったのでいじっています)
validRange: function(nowDate){
var startDate = new Date(nowDate);
startDate.setDate(1); // 開始月の1日
var endDate = new Date(startDate);
endDate.setMonth(endDate.getMonth() + 4); // ３ヶ月後まで
endDate.setDate(0); // 月末に設定
return {
start: startDate,
end: endDate,
};
},
前月が選択不可、設定した月数以降選択不可
・特定の文字だけ太くしたいのですが・・・
eventContentで設定ができます
テーブルにtext_boldカラムを追加しました
console.log(reponse)でtext_boldも返ってきていることが確認できました
1なら太字にするという設定にしましょう。
一番初めに載せたコードのajax部分のformattedEventsにextendedPropsを追加します
const formattedEvents = response.map(event => ({
title: event.events, // eventsの文字列をタイトルとして使用
start: event.date, // 日付を開始日として使用
extendedProps: {
action: event.text_bold, // 太字にするため
}
}));
eventContent: function(arg) {
const {action} = arg.event.extendedProps; // text_bold
const color = action === '1' ? 'black' : '';
const textBold = action === '1' ? 'bold' : '';
let styles = `<div style="color: ${color}; font-weight: ${textBold};"> ${arg.event.title} </div>`
return {
html: styles
};
}
・カレンダーの表示週を自動で調節してもらいたい
fixedWeekCount: false
これを入れるだけです。５週６週など調節してくれます
・土日の文字の色を変えたい
cssで設定可能です
th.fc-day-sat .fc-col-header-cell-cushion {
color: blue;
}
td.fc-day-sat .fc-daygrid-day-number {
color: blue;
}
th.fc-day-sun .fc-col-header-cell-cushion {
color: red;
}
td.fc-day-sun .fc-daygrid-day-number {
color: red;
}
最後に
公式HPには300以上の設定ができると書いてありますね・・・！
それにカスタマイズ例を調べていると高確率で必要そうなものは複数の方が書いてくださっている印象があります。
調べていて日本語の情報がなかなか無いこと、ドキュメント通りに行かなかったことが実感としてありました。
少しでも役に立てたら嬉しいです。