javascript - 如何从 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 构造函数需要一个 native DOM 元素。

您可以编写 $("#calendarDiv")[0] 从 jQuery 对象中提取 DOM 元素(如评论之一中所建议的那样)，但是创建一个 jQuery 对象只是为了让你可以立即扔掉它，这是毫无意义的。

只需使用 native 选择器即可:

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