1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ASP.NET Core MVCでFullCalendarを表示

Posted at

はじめに

ASP.NET Core MVC(.NET Core 3.1)でFullCalendarを表示する方法について説明します。

プロジェクト作成

  1. VS2019で「ASP.NET Core Web アプリケーション」のプロジェクトを選択。
  2. 種類の選択で「Web アプリケーション(モデル ビュー コントローラー)」を選択。

FullCalendarのダウンロードとセットアップ

  1. https://fullcalendar.io/ からzipファイルのダウンロード。
  2. 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クラスをそのまま返していて、なかなかイベントが表示されずにハマりました。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?