fullcalendar 不显示事件

Question

我想在完整日历中添加一些活动。 aspx中的webmethod生成一个json给js 但是我不能 link 带有完整日历的网络方法的结果，我只能添加手册事件。

js :

$(document).ready(function () {
$('#btnInit').click(function () {
    var start = Date.parse($("#MainContent_dateD").text());
    var end = Date.parse($("#MainContent_dateF").text());
    var cle = $("#MainContent_HF_cleU").val();
    $.ajax({
        type: "POST",
        url: "ConsultationPlanning.aspx/getPlanning",
        data: '{"start": "' + start + '", "end": "' + end + '"}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            if (msg == null) {
                alert('no result');
                return;
            }
            alert("received: " + msg.d);
            document.getElementById("MainContent_dateD").innerHTML = msg.d;
            $('#calendar').fullCalendar({
                eventSources: JSON.parse(msg.d)
            });
        },
        error: function(msg){
            alert("marche pas : " + msg);
        }
    });
});

$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    hiddenDays: [0],
    defaultView: 'month',
    editable: false,
    allDaySlot: false,
    selectable: false,
    eventSources: [{
        url: 'ConsultationPlanning.aspx/getPlanning'
    }]
});})

首先，这个webmethods中的参数是String 和 aspx.cs :

    public static String getPlanning(string start, string end)
    {
        List<String> ls1 = new List<string>();
        IList<Planning> ls2= new List<Planning>();

        DateTime t = Convert.ToDateTime(start);
        DateTime t2 = t.AddHours(1.0);
        Planning p=new Planning();

        for (int i = 0; i < 4; i++)
        {
            p.id = "" + i + "" ;
            p.title = "event "+i ;
            p.start = String.Format("{0:s}", t.AddDays(Convert.ToDouble(i)));
            p.end = String.Format("{0:s}", t2.AddDays(Convert.ToDouble(i)));
            ls2.Add(p);
        }
        System.Web.Script.Serialization.JavaScriptSerializer oSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        string sJSON = oSerializer.Serialize(ls2);
        return sJSON;
    }

我将 json 文件检查到 jsonlint.com 并且它是有效的，所以我猜错误在 js 中，但我看不到哪里。

和 json :

    [
    {"id":"0","title":"event 0","start":"2015-05-04T12:35:37","end":"2015-05-04T13:35:37"},
    {"id":"1","title":"event 1","start":"2015-05-05T12:35:37","end":"2015-05-05T13:35:37"},
    {"id":"2","title":"event 2","start":"2015-05-06T12:35:37","end":"2015-05-06T13:35:37"},
    {"id":"3","title":"event 3","start":"2015-05-07T12:35:37","end":"2015-05-07T13:35:37"}]

Answer 1

添加 events: [<%=getPlanning%>] 并删除 eventSources。

Answer 2

您应该尝试使用此代码仅获取给定范围内的事件，然后，回调应该会发挥作用：

eventSources: {
    events: function (start, end, callback) {
        $.ajax({
           type: "POST",
           url: "ConsultationPlanning.aspx/getPlanning",
           data: '{ "start": "' + start.toISOString() + '", "end": "' + end.toISOString() + '" }',
           contentType: "application/json; charset=utf-8",
           dataType: "json",
           success: function (msg) {
               callback(msg.d);
           } 
        }
    }
}

要使其正常工作，您必须用 DateTime 参数替换服务器方法的签名...

Answer 3

日历从未正确加载数据，因为它首先加载到没有事件的完整日历中。而且，我想我应该做一个 addEventSource ... 在 document.ready(function) 中移动调用后，解决方案是在事件中获取 json 的结果而不是 eventSource ：

$(document).ready(function () {
var start = Date.parse($("#MainContent_dateD").text());
var end = Date.parse($("#MainContent_dateF").text());
var cle = $("#MainContent_HF_cleU").val();

$.ajax({
    type: "POST",
    url: "ConsultationPlanning.aspx/getPlanning",
    data: '{"start": "' + start + '", "end": "' + end + '"}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",

    success: function (msg) {
        if (msg == null) {
            alert('no result');
            return;
        }

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            hiddenDays: [0],
            defaultView: 'month',
            editable: false,
            allDaySlot: false,
            selectable: false,
            events: JSON.parse(msg.d)
        });
    },

    error: function(msg){
        alert("function not working : " + msg);
    }
});
})

我现在不关闭这个主题，如果您有任何改进代码的建议。

fullcalendar 不显示事件

fullcalendar doesn't show events

javascript

json

fullcalendar