如何从 Controller 获取 FullCalendar 的事件？

Question

我有一个 div，我想在其中显示基于按钮点击的日历：

<label class="btn" onclick="getCalendar();"> Show Calendar </label>

<div id="calendarDiv">

</div>

getCalendar()函数实现如下：

function getCalendar() {
    var calendar = new FullCalendar.Calendar($("#calendarDiv"), {
        plugins: ['dayGrid'],
        header: {
            left: 'title',
            center: '',
            right: 'today prev,next'
        },
        buttonText: {
            today: 'Today'
        },

        defaultView: 'dayGridMonth',
        defaultDate: '2019-09-12',

        events: function(fetchInfo, successCallback, failureCallback) {
            $.post('/Customer/GetCalendarEvents',
                $.param({
                        selectedCountryIds: getSelectionsByName('cntName'),
                        fiscalYearEnd: '31/12/2018'
                    },
                    true),
                function (res) {
                    var events = [];
                    console.log(res);
                    $.each(res,
                        function (index, value) {
                            events.push({
                                title: value.title,
                                start: value.start
                            });
                        });
                    successCallback(events);
                })
                .fail(function () {
                failureCallback(alert('bla')); 
            });
        }
    });
    calendar.render();
}

其中，GetCalendarEvents(selectedCountryIds, fiscalYearEnd) returns 一个 Json 数组，其中包含按以下方式构造的事件列表：

public JsonResult GetCalendarEvents(List<int> selectedCountryIds, string fiscalYearEnd) {
    // some initial steps to get finalList
    // creating result array
    var result = finalList.Select(r => new
    {
        title = r.Item2 + " : " + r.Item3,
        start = r.Item1
    });
    return Json(result, JsonRequestBehavior.AllowGet);
}

函数 returns 正确的数组和事件 [] 正确生成，但是，当我运行它时，我没有显示任何内容，并且在控制台中我看到一个错误：

main.min.js:6 Uncaught TypeError: e.addEventListener is not a function
    at O (main.min.js:6)
    at e.bindHandlers (main.min.js:6)
    at e.render (main.min.js:6)
    at getCalendar (ViewName:1118) // this is the line with calendar.render();
    at HTMLLabelElement.onclick (ViewName:1037)

任何建议可能是什么问题，我该如何解决？我正在使用最新版本的 FullCalendar。

Answer 1

如您所见the official docs you need to pass Element , but in you code $("#calendarDiv") jquery will return array-like object of Elements read mode here, so if you need to use jquery selector you can get it like this $("#calendarDiv")[0] or you can do it like the suggest in the official docs

 var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), { ...

Answer 2

看起来问题是 $("#calendarDiv") returns 一个 jQuery 对象，但是 fullCalendar 构造函数需要一个原生 DOM 元素。

你可以编写 $("#calendarDiv")[0] 以从 jQuery 对象中提取 DOM 元素（如评论之一所建议），但是创建一个 jQuery 对象只是为了可以立即再次丢弃它是没有意义的。

而是使用原生选择器：

var calendar = new FullCalendar.Calendar(document.querySelector("#calendarDiv"), {

P.S。我认为您可以大大简化您的事件代码。这段代码最初让我印象深刻：

events.push({
  title: value.title,
  start: value.start
});

不清楚您为什么要重新创建一个与原始结构相同的对象？您将获得与输入完全相同的输出！

如果服务器已经以正确的格式输出 JSON，那么您可以使用更简单的 events as JSON feed 模式将事件连接到 fullCalendar。您只需为 fullCalendar 提供 URL 和基本参数，它将处理其余部分：

events: {
  url: '/Customer/GetCalendarEvents',
  method: "POST",
  extraParams: function() { // a function that returns an object
    return {
      selectedCountryIds: getSelectionsByName('cntName'),
      fiscalYearEnd: '31/12/2018'
    };
  }
}

如何从 Controller 获取 FullCalendar 的事件？

How to get events for FullCalendar from Controller?

javascript

jquery

asp.net-mvc

fullcalendar

fullcalendar-4