如何从 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) 返回一个 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);
}

该函数返回正确的数组，并且正确生成了 events[]，但是，当我运行它时，我什么也没有显示，并且在控制台中我看到一个错误：

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

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

您可以写$("#calendarDiv")[0] 来从jQuery 对象中提取DOM 元素（如其中一个cmets 中所建议的那样），但是创建一个jQuery 对象只是为了抛出它立即再次消失。

而只是使用原生选择器：

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

---

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

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'
    };
  }
}

Answer 2

正如您在the official docs 中看到的，您需要传递Element，但在您的代码中$("#calendarDiv") jquery 将返回元素read mode here 的类似数组的对象，所以如果您需要使用jquery选择器你可以像这样 $("#calendarDiv")[0] 得到它，或者你可以像the official docs中的建议那样做

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