はじめに

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クラスをそのまま返していて、なかなかイベントが表示されずにハマりました。

ASP.NET Core MVCでFullCalendarを表示