FullCalendar - 事件从API获取数据并且看起来是正确的,但不会显示在日历中

时间:2017-02-14 17:48:17

标签: javascript jquery asp.net fullcalendar

首先或全部...我已经浏览了大量的材料和示例,但无论如何我无法理解......

情景:

使用Web Api 2在ASP.NET上运行...

调用API来获取事件,对象似乎是合法的: enter image description here

问题似乎是回调永远不会成真..

代码:



$(document).ready(function() {

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var calendar = $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        selectable: true,
        selectHelper: true,
        select: function (start, end, allDay) {
            var title = prompt('Event Title:');
            if (title) {
                calendar.fullCalendar('renderEvent',
                    {
                        title: title,
                        start: start,
                        end: end,
                        allDay: allDay
                    },
                    true // make the event "stick"
                );
            }
            calendar.fullCalendar('unselect');
        },
        editable: true,
        events: function (start, end, callback) {
            $.ajax({
                type: "GET",    //WebMethods will not allow GET
                url: "api/Calendar/GetCalendarEvents/" + getQueryVariable("teamid"),
                //completely take out 'data:' line if you don't want to pass to webmethod - Important to also change webmethod to not accept any parameters 
                contentType: "application/json; charset=utf-8",  
                dataType: "json",
                success: function (doc) {
                    var events = [];   //javascript event object created here
                    
                    var obj = doc;
                    $(obj).each(function () {                          
                            events.push({
                            title: $(this).attr('title'),  //your calevent object has identical parameters 'title', 'start', ect, so this will work
                            start: $(this).attr('start'), // will be parsed into DateTime object    
                            end: $(this).attr('end'),
                            id: $(this).attr('id')
                        });
                    });                     
                    if (callback) callback(events);
                }
            });
        }
    });




1 个答案:

答案 0 :(得分:1)

根据官方文档https://fullcalendar.io/docs/event_data/events_function/,以编程方式生成事件对象的功能

function( start, end, timezone, callback ) { }

您应该用以下内容替换您的事件功能:

        events: function (start, end, timezone, callback) {
            $.ajax({
                type: "GET",    //WebMethods will not allow GET
                url: "api/Calendar/GetCalendarEvents/" + getQueryVariable("teamid"),
                //completely take out 'data:' line if you don't want to pass to webmethod - Important to also change webmethod to not accept any parameters 
                contentType: "application/json; charset=utf-8",  
                dataType: "json",
                success: function (doc) {
                    var events = [];   //javascript event object created here

                    var obj = doc;
                    $(obj).each(function () {                          
                            events.push({
                            title: $(this).attr('title'),  //your calevent object has identical parameters 'title', 'start', ect, so this will work
                            start: $(this).attr('start'), // will be parsed into DateTime object    
                            end: $(this).attr('end'),
                            id: $(this).attr('id')
                        });
                    });                     
                    if (callback) callback(events);
                }
            });
        }

因为当您使用三个参数调用时,第四个参数回调为空,这就是没有获取事件的原因。