在上一次按钮点击中未显示完整日历数据

时间:2017-09-21 08:01:15

标签: jquery ajax fullcalendar

我使用完整的日历来显示每月学生的出勤率。当我点击上一个按钮数据正确加载但值没有显示在我的日历中。我可以在控制台中查看日期,但不能在日历中查看日期

$(document).on("click", ".fc-prev-button", function () {
    getMonth();
});
$(document).on("click", ".fc-next-button", function () {
    getMonth();
});

function getMonth() {
    var date = $('div[id*=calendar1]').fullCalendar('getDate');
    date = date.format('YYYY-MM-DD');
    alert(date);
    $('div[id*=calendar1]').fullCalendar({
        header: {
            left: 'prev,next today myCustomButton',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        }
    });

    $.ajax({
        type: "POST",
        contentType: "application/json",
        data: "{Date:'" + date + "'}",
        url: "attendance-full.aspx/GetEvents",
        dataType: "json",
        success: function (data) {
            alert("Done");
            console.log(data);
            events: $.map(data.d, function (item, i) {
                var event = new Object();
                event.id = item.EventID;
                event.start = new Date(item.StartDate);
                event.title = item.EventName;
                return event;
            })
            $("#calendar1").fullCalendar("refetchEvents");
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            debugger;
        }
    });
}

1 个答案:

答案 0 :(得分:0)

我不完全确定您的getMonth()打算做什么,但是当您更改月份时,Fullcalendar会自动处理加载和重新呈现新事件。如果您要更改几个月后更新显示的事件,则可以删除大部分代码,并使用以下内容。

初始化您的日历,包括获取活动的位置:

$('div[id*=calendar1]').fullCalendar({
    header: {
        left: 'prev,next today myCustomButton',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    events: "attendance-full.aspx/GetEvents",
});

那就是它! Fullcalendar将在首次初始化日历时查询您的事件源URL,然后在您更改月份或视图时再次查询。它会自动重新呈现新事件 - 您不需要编写代码来手动执行此操作。

每次Fullcalendar查询事件源时,它都会传递startend个参数,因此您的服务器端代码应使用这些参数来确定要返回的事件。看起来您的代码正在使用Date - 您应该将代码更新为startend,或者use startParam可以将start更改为{ {1}}(尽管您可能也想使用Date)。

Fullcalendar文档很好,您应该通读它们。查看the event source documentation,然后查看some of their examples