在 Fullcalendar.js 中显示事件的问题

Posted 2023-05-09

【中文标题】在 Fullcalendar.js 中显示事件的问题

【英文标题】：Issue in displaying events in Fullcalendar.js

【发布时间】：2016-05-22 11:04:04

【问题描述】：

您好，我正在尝试使用 Asp.Net MVC 实现 FullCalendar.js。我可以显示空日历，但我的事件没有加载到日历中。

 $.ajax(
                type: 'Get',
                url: "/Matter/GetMatterEventsSummary",
                data: data,

                datatype: "Json",

                contentType: "application/json",
                success: function (doc) 
                    debugger;
                    $('#calendar').fullCalendar();
                    var events = [];
                    $(doc).find('[object Object],[object Object]').each(function () 
                        debugger;
                    events.push(

                            title: $(this).attr('title'),
                            start: $(this).attr('start') // will be parsed
                        );
                   // );
                    $('#calendar').fullCalendar('refetchEvents');
                  //  callback(events);
                

            );

它涉及成功方法，其中包含两个事件。但不知道为什么这些事件没有加载到 FullCalendar 中，并且在这个日历之后也没有自动出现。 我猜它不会出现在 events.push 中。当我将鼠标悬停在 doc 上时，它会显示“[object Object]，[object Object]”，并且在 [0] 和 [1] 上有两条记录。

请帮帮我。

【参考方案1】：

尝试使用

$('#calendar').fullCalendar( 'rerenderEvents' )

在您的事件被拉出之后。

另外，请确保正确使用官方文档中的代码。尝试以下（未经测试）：

$('#calendar').fullCalendar(
  events: function(start, end, timezone, callback) 
    $.ajax(
        type: 'Get',
        url: "/Matter/GetMatterEventsSummary",
        data: data,
        datatype: "Json",
        contentType: "application/json",,
        success: function(doc) 
            var events = [];
            $(doc).find('event').each(function() 
                events.push(
                    title: $(this).attr('title'),
                    start: $(this).attr('start') // will be parsed
                );
            );
            callback(events);
        
    );
  
);

如果您现在想重新获取您的事件，请致电：

  $('#calendar').fullCalendar('refetchEvents');

必要时。

编辑： 由于您实际上是从 JSON 提要中提取数据，因此以下代码甚至可能就足够了：

$('#calendar').fullCalendar(
    events: '/Matter/GetMatterEventsSummary'
);

查看文档here：

编辑2：

要动态修改您发送到后端的请求（取决于下拉菜单或其他内容），可以实现如下：

 var myValue = 10;

 $('#calendar').fullCalendar(
    events: '/Matter/GetMatterEventsSummary',
    data: function()  // a function that returns an object
        return 
            dynamic_value: myValue
        ;
    
);

【讨论】：

谢谢，我可以通过编辑后的答案获取日历上的事件，但仍然面临问题，因为页面首次加载时我什么也没有得到，如果我点击箭头，我会得到数据。

我还想在日历中显示当前月份的活动，我需要在其中传递日期吗？如果是，那么单击箭头时月份将如何变化。

关于您的第一条评论，您是否尝试过调用“refetchEvents”（在加载日历后），如上所述？关于您的第二条评论，我不确定我是否理解正确。如文档中所写（我的答案中的链接），fullcalendar 会自动将开始和结束日期（如 (.../Matter/GetMatterEventsSummary/start=2013-12-01&end=2014-01-12)）发送到后端。每次单击箭头时，都会向后端发送一个新的请求，并调整开始/结束日期。在后端，您必须读出这些值并返回相应的事件。

感谢您的回复，我已经尝试了“refetchEvents”（在加载日历后），但对我不起作用。

您能否告诉我如何在下拉更改事件中更改日历的数据，我可以根据更改的下拉值获取数据，但是如何在成功事件中设置此值.