Question

我尝试将事件放在FullCalendar插件上。通过AJAX调用，我进入我的C＃WebMethod，我在数据库中记录了一些记录，然后从WebMethod返回一个包含不同事件的数组。

这是我的Ajax，显示日历：

var source = [];
$.ajax({
    type: 'POST',
    url: "Default.aspx/GetEvents",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    data: '{ userId: 1}',
    success: function (doc) {
        source = [doc.d[0], doc.d[1], doc.d[2]];

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: '',
                right: 'month,basicWeek, agendaFourDay',
            },
            views: {
                agendaFourDay: {
                    type: 'agenda',
                    duration: { week: 1 },
                    buttonText: '7 day'
                }
            },
            height: 650,
            dayClick: function (date, view) {
                alert('Clicked on: ' + date.format());
                alert('Current view: ' + view.name);
                // change the day's background color just for fun
                $(this).css('background-color', 'red');
                $("#AddNew").css("display", "block");
                $("#stDate").val(date.format('DD/MM/YYYY'));
            },
        });
        alert(source);
        $('#calendar').fullCalendar('renderEvent', source, true);
        $('#calendar').fullCalendar('addEventSource', source);
        $('#calendar').fullCalendar('refetchEvents');           
    }
});

然后我的代码C＃：

    [System.Web.Services.WebMethod]
    public static string[] GetEvents(int userId)
    {
        string sql;
        Recordset rst = new Recordset();


        string eventName = null;
        string stDate = null;
        string edDate = null;
        int j = 0;

        if (AppCode.Utils.DB_Connect())
        {
            sql = "SELECT * FROM events WHERE Users_idUsers = 1";
            rst.Open(sql, AppCode.Utils.ocn, CursorTypeEnum.adOpenStatic, LockTypeEnum.adLockOptimistic, -1);

            if(!rst.EOF)
            {  
                while (!rst.EOF)
                {
                    eventName += rst.Fields["EventName"].Value.ToString() + '#' + rst.Fields["StartDate"].Value.ToString() + '#' + rst.Fields["EndDate"].Value.ToString()+'&';                       
                    rst.MoveNext();
                    j++;
                }

            }
            if (rst.State > 0)
                rst.Close();

        }
        AppCode.Utils.DB_Disconnect();

        eventName = eventName.Substring(0, eventName.Length - 1);
        string[] events = eventName.Split('&');

        string final = "";

        foreach (var item in events)
        {
            string[] elements = item.Split('#');
            DateTime dt = new DateTime();
            dt = Convert.ToDateTime(elements[1]);
            stDate = dt.ToString("yyyy-MM-dd");

            DateTime ft = new DateTime();
            ft = Convert.ToDateTime(elements[2]);

            edDate = ft.ToString("yyyy-MM-dd");               

            final += "{  title: '" + elements[0] + "',start: '" + stDate + "',end: '" + edDate + "'}#";
        }

        final = final.Substring(0, final.Length - 1);
        string[] eventsArray = final.Split('#');
        return eventsArray;
    }

Firebug说有一个错误：

TypeError: eventProps.start is undefined


eventProps.allDay = !(eventProps.start.hasTime() || (eventProps.end && eventProp...

我的记录，例如d [0]看起来像那样：

"{  title: 'aaa',start: '2016-12-11',end: '2016-12-11'}"

您是否有问题如何解决此错误？我可能错了吗？或者还有另一个问题来显示事件？我从互联网和FullCalendar的文档中搜索了很多，但我找不到解决方案..

Answer 1

假设您的所有数据都有效，您需要做的唯一事情就是删除

$('#calendar').fullCalendar('renderEvent', source, true);
$('#calendar').fullCalendar('addEventSource', source);
$('#calendar').fullCalendar('refetchEvents');

而只保留此

$('#calendar').fullCalendar('addEventSource', source);

话虽如此，我建议您使用eventSources在fullCalendar初始化中使用ajax调用。

＆＃34;您可以将任意数量的事件数组，函数，JSON提要URL或完整的事件源对象放入eventSources数组中。＆＃34;

您可能希望使用当前视图的功能和过滤日期（而不是加载事件的整个历史记录），以便根据视图自动呈现它（请记住，您需要调整服务器功能支持它。）

如何使用AJAX使用事件填充FullCalendar？

1 个答案: