【问题标题】:Issue in displaying events in Fullcalendar.js在 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] 上有两条记录。

请帮帮我。

【问题讨论】:

    标签: javascript jquery jquery-plugins fullcalendar asp.net-ajax


    【解决方案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”(在加载日历后),但对我不起作用。
    • 您能否告诉我如何在下拉更改事件中更改日历的数据,我可以根据更改的下拉值获取数据,但是如何在成功事件中设置此值.
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多