はじめに
ASP.NET Core MVC(.NET Core 3.1)でFullCalendarを表示する方法について説明します。
プロジェクト作成
- VS2019で「ASP.NET Core Web アプリケーション」のプロジェクトを選択。
- 種類の選択で「Web アプリケーション（モデル ビュー コントローラー）」を選択。
FullCalendarのダウンロードとセットアップ
- https://fullcalendar.io/ からzipファイルのダウンロード。
- zipを解答し、packages内のディレクトリを作成したプロジェクトの「wwwroot\lib」内にコピー。
例：wwwroot\lib\fullcalendar-4.4.0\packages
FullCalendarの設定
今回は解答したzip内の「examples\daygrid-views.html」を参考に設定。
表示するカレンダーの種類によって、参照するcssとjsが変わる。
_Layout.cshtml内の設定。
_Layout.cshtml
<head>
～
<link href="~/lib/fullcalendar-4.4.0/packages/core/main.css" rel="stylesheet" />
<link href="~/lib/fullcalendar-4.4.0/packages/daygrid/main.css" rel="stylesheet" />
<link href="~/lib/fullcalendar-4.4.0/packages/timegrid/main.css" rel="stylesheet" />
<link href="~/lib/fullcalendar-4.4.0/packages/list/main.css" rel="stylesheet" />
</head>
<body>
～
<script src="~/lib/fullcalendar-4.4.0/packages/core/main.js"></script>
<script src="~/lib/fullcalendar-4.4.0/packages/interaction/main.js"></script>
<script src="~/lib/fullcalendar-4.4.0/packages/daygrid/main.js"></script>
<script src="~/lib/fullcalendar-4.4.0/packages/timegrid/main.js"></script>
<script src="~/lib/fullcalendar-4.4.0/packages/list/main.js"></script>
@RenderSection("Scripts", required: false)
</body>
Index.cshtmlの設定
Index.cshtml
@*どこか適当な場所に記述。ここにカレンダーが表示される*@
<div id="calendar"></div>
@section Scripts {
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list' ],
header: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
},
defaultDate: '2020-02-12',
navLinks: true, // can click day/week names to navigate views
businessHours: true, // display business hours
editable: true,
events: '@Url.Action("GetAllEvents")'
});
calendar.render();
});
</script>
}
HomeController.csの設定
HomeController内に追記する。
HomeController.cs
public IActionResult GetAllEvents(DateTime start, DateTime end)
{
var events = new List<Event>
{
new Event
{
Title = "てすと",
Start = DateTime.Parse("2020-02-18 00:00:00"),
End = DateTime.Parse("2020-02-20 00:00:00"),
}
};
return new JsonResult(events);
}
Eventクラス
Event.cs
public class Event
{
public string Title { get; set; }
public DateTime Start { get; set; }
public DateTime End { get; set; }
}
FullCalendarの表示
あとは実行すればカレンダーが表示されます。
GetAllEventsのstartとendには表示されるカレンダーの始まりと終わりの日付が入ってくるので、
それを利用すればGetAllEvents内で範囲内のイベントの取得が可能になります。（DBを参照するなど）
ハマったこと
GetAllEventsで返すJsonResultは配列の必要があるのですが、
それに気が付かずにずっとEventクラスをそのまま返していて、なかなかイベントが表示されずにハマりました。