C# と VB.NET の質問掲示板

【開発環境】
.NetFramework4.7.2
visualsutudio 2019　asp.net MVC
fullcarendar v6.18

【困っていること】
DBよりイベントを取得しカレンダー上に表示させたいがFullcarendarのjavascript上で下記エラーが発生する。

index.global.min.js:6  Uncaught (in promise) TypeError: Cannot use 'in' operator to search for 'display' in [
    at _n (index.global.min.js:6:50229)
    at Zn (index.global.min.js:6:55081)
    at Yn (index.global.min.js:6:53660)
    at On (index.global.min.js:6:51106)
    at index.global.min.js:6:107490
    at Es (index.global.min.js:6:107564)
    at ha._handleAction (index.global.min.js:6:163499)
    at da.runTask (index.global.min.js:6:159053)
    at da.drain (index.global.min.js:6:158979)
    at Ps.drained (index.global.min.js:6:112906)


【スクリプト】
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js'></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            locale: 'ja',
            buttonText: {
                today: '今日',
                month: '月',
                week: '週',
                day: '日',
                list: 'リスト'
            },
            views: {
                week: {
                    allDayText: '終日'
                },
                day: {
                    allDayText: '終日'
                }
            },
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
            },
            businessHours: {
                daysOfWeek: [1, 2, 3, 4, 5],
                startTime: '08:00',
                endTime: '17:00',
            },
            initialView: 'dayGridMonth',
            eventSources: [
                {
                    url: '/Home/GetEvents',  // イベントデータを取得するURL
                    type: 'GET',         // データを取得するHTTPメソッド
                    color: 'blue'        // イベントの色
                }
            ]
        });
        calendar.render();
    });

【コントローラ】
[HttpGet]
        public ActionResult GetEvents()
        {
            EventRepository er = new EventRepository();

            // データベースからイベントデータを取得する処理
            var eventData = er.GetEventsFromDatabase();

            // オプション設定
            var options = new JsonSerializerOptions
            {
                // 日本語を変換するためのエンコード設定
                Encoder = JavaScriptEncoder.Create(UnicodeRanges.All),

                // プロパティ名をキャメルケースに変換
                //PropertyNamingPolicy = JsonNamingPolicy.CamelCase,

                // インデントを付ける
                WriteIndented = true
            };

            // シリアライズ
            var jsonString = JsonSerializer.Serialize(eventData, options);

            return Json(jsonString,JsonRequestBehavior.AllowGet);
        }
    }

【model】
 public class EventModel
    {
        public string Id { get; set; }
        public string Title { get; set; }
        public DateTime Start { get; set; }
        public DateTime End { get; set; }
    }

    public class EventRepository
    {
        //Mysql接続文字列

        public List<EventModel> GetEventsFromDatabase()
        {
            List<EventModel> events = new List<EventModel>();

            // データベースからデータを取得する処理を実装
            // EventModelオブジェクトにマッピングして返す
            //Mysql操作用
            MySqlConnection sqlConn = new MySqlConnection(); //DB接続用

            try
            {
                MySqlConnectionStringBuilder sqlBuilder = new MySqlConnectionStringBuilder();
                sqlBuilder.Server = server;
                sqlBuilder.UserID = userID;
                sqlBuilder.Password = pass;
                sqlBuilder.Database = database;

                //接続文字列設定
                sqlConn.ConnectionString = sqlBuilder.ConnectionString;

                //DB接続
                sqlConn.Open();

                //DB操作
                MySqlDataAdapter sqlDtA = new MySqlDataAdapter();

                MySqlCommand sqlCmd = sqlConn.CreateCommand();

                //SQL文作成
                sqlCmd.CommandText = @"SELECT * ";
                sqlCmd.CommandText += @"FROM T_yoyaku ";


                //SQL文実行
                MySqlDataReader sqlReader = sqlCmd.ExecuteReader();

                //testTable内にデータが入っているか判定
                if (sqlReader.HasRows)
                {
                    //レコード分ループする
                    while (sqlReader.Read())
                    {
                        EventModel eventModel = new EventModel
                         {
                             Id = sqlReader["id"].ToString(),
                             Title = sqlReader["title"].ToString(),
                             Start = Convert.ToDateTime(sqlReader["start"]),
                             End = Convert.ToDateTime(sqlReader["end"])
                         };
                        events.Add(eventModel);
                    }
                    
                }

                sqlReader.Close();

                sqlCmd.Dispose();

                return events;

            }
            catch
            {
                return events;
            }
            finally
            {
                // 接続解除
                sqlConn.Close();
                sqlConn.Dispose();
            }

        }
    }

【補足】
コントローラで返しているJSONデータの中身は
[
  {
    "Id": "1",
    "Title": "イベント",
    "Start": "2023-07-02T00:00:00",
    "End": "2023-07-03T00:00:00"
  },
  {
    "Id": "2",
    "Title": "イベント",
    "Start": "2023-07-04T00:00:00",
    "End": "2023-07-05T00:00:00"
  }
]
となっています。


色々調べても修正方法が分からずどなたか助けていただけませんか。

■No102101 (あああ さん) に返信
> index.global.min.js:6  Uncaught (in promise) TypeError: Cannot use 'in' operator to search for 'display' in [
こっちのエラーの理由はわかりませんが：


> [
>   {
>     "Id": "1",
>     "Title": "イベント",
>     "Start": "2023-07-02T00:00:00",
>     "End": "2023-07-03T00:00:00"
>   },
>   {
>     "Id": "2",
>     "Title": "イベント",
>     "Start": "2023-07-04T00:00:00",
>     "End": "2023-07-05T00:00:00"
>   }
> ]

JSON の大文字小文字が間違っていませんか?
手元のデバッガで試してみると、小文字にしないとイベントを認識しませんでしたが。
https://fullcalendar.io/docs/event-source-object

[
  {
    "id": "1",
    "title": "イベント",
    "start": "2023-07-02T00:00:00",
    "end": "2023-07-03T00:00:00"
  },
  {
    "id": "2",
    "title": "イベント",
    "start": "2023-07-04T00:00:00",
    "end": "2023-07-05T00:00:00"
  }
]

■No102101 (あああ さん) に返信

ちょっと試してみました。

No102107 で、

>>var jsonString = JsonSerializer.Serialize(eventData, options);
>>return Json(jsonString,JsonRequestBehavior.AllowGet);
> 
> 1 行目で System.Text.Json 名前空間の JsonSerializer クラスを使って JSON 文字列
> にシリアライズして、それを 2 行目で MVC5 の Json メソッド (Newtonsoft.JSON を使
> っているはず) でもう一回 JSON 文字列にシリアライズしています。何か意味があるの
> ですか？
> 
> Fullcarendar は自分は触ったこともないの分かりませんが、渡すデータの形式 (特に
> 日時) は仕様に合っているのでしょうか？

と書きましたが、原因はやはりその 2 点のようです。

どのように直せばいいかと言うと、前者については jsonString をそのまま以下のようにし
て返せばいいです。

// シリアライズ
var jsonString = JsonSerializer.Serialize(eventData, options);

Response.ContentType = "application/json; charset=utf-8";
return Content(jsonString);

後者については、魔界の仮面弁士さんが書かれたように、大文字小文字の問題です。
質問者さんのコードで以下のところのコメントアウトを外せば小文字になります。

// プロパティ名をキャメルケースに変換
//PropertyNamingPolicy = JsonNamingPolicy.CamelCase,

検証に使った GetEvents メソッドのコードを以下に載せておきます。

public ActionResult GetEvents()
{
    var eventData = new List<EventModel>
    {
        new EventModel
        {
            Id = "1",
            Title = "イベント",
            Start = new DateTime(2023,7,2,0,0,0),
            End = new DateTime(2023,7,3,0,0,0)
        },
        new EventModel
        {
            Id = "2",
            Title = "イベント",
            Start = new DateTime(2023,7,4,0,0,0),
            End = new DateTime(2023,7,5,0,0,0)
        }
    };

    // これは日付の JSON 文字列の形式が　"\/Date(1688223600000)\/" になるのでダメ
    //return Json(model, JsonRequestBehavior.AllowGet);

    var options = new JsonSerializerOptions
    {
        // 日本語を変換するためのエンコード設定
        Encoder = JavaScriptEncoder.Create(UnicodeRanges.All),

        // プロパティ名をキャメルケースに変換
        PropertyNamingPolicy = JsonNamingPolicy.CamelCase,

        // インデントを付ける
        WriteIndented = true
    };

    // シリアライズ
    var jsonString = JsonSerializer.Serialize(eventData, options);

    Response.ContentType = "application/json; charset=utf-8";
    return Content(jsonString);
}