在完整日历上呈现JSON事件

时间:2016-07-29 08:53:44

标签: javascript jquery json fullcalendar

我正在尝试从json响应中呈现fullcalendar上的事件,

$.ajax({
        url : $("body").attr("data-link")+'/calendar/events',
        type : 'post',
        dataType: 'json',
        success: function(e){
            if(e.success){
                var events = [];
                $.each(e.events,function(index,value){
                    events.push({
                        title : value.title,
                        start : moment(value.start_date).format('YYYY-MM-DD'),
                        end : moment(value.end_date).format('YYYY-MM-DD'),
                    });
                });
                calendar.fullCalendar( 'renderEvent', events , true);
                console.log(events);
            }
        }
    });

这是我的完整日历设置

var calendar = $('#calendar').fullCalendar({
        customButtons: {
            myCustomButton: {
                text: 'Add Event',
                click: function() {

                }
            }
        },
         header: {
            left: 'prev,next today myCustomButton',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable : false,
        eventLimit: true,
        eventClick: function(calEvent, jsEvent, view, element) {
        },
        eventRender: function(event, element) {
            element.attr("data-id",event.id);
        },

    });

在控制台日志中。

enter image description here

然后它给了我这个错误,

  

未捕获的TypeError:无法读取未定义的属性'hasTime'

任何想法,请帮忙吗?

1 个答案:

答案 0 :(得分:0)

您可以为renderEvent中的每个事件调用events,也可以将整个数组添加为数据源

$.ajax({
        url : $("body").attr("data-link")+'/calendar/events',
        type : 'post',
        dataType: 'json',
        success: function(e){
            if(e.success){
                var events = [];
                $.each(e.events,function(index,value){
                    events.push({
                        title : value.title,
                        start : moment(value.start_date).format('YYYY-MM-DD'),
                        end : moment(value.end_date).format('YYYY-MM-DD'),
                    });
                });
                calendar.fullCalendar( 'addEventSource', events);
            }
        }
    });