FullCalendar - 更改日期事件

时间:2015-05-22 07:49:23

标签: fullcalendar

我正在使用FullCalendar 2.3.1,我尝试在上一个或下个月点击后在fullcalendar上加载一个微调器覆盖。 我试着用:

var box;
$("#calendar").fullCalendar({
    lang: locale.substring(0, 2),
    header: {
        left: 'today prev,next',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    loading: function(isLoading) {
        if (isLoading) {

        } else {
        }
    },
    dayClick: function() {
        alert('a day has been clicked!');
    },
    events: function (start, end, timezone, callback) {
        $.ajax({
            url: "http://"+window.location.host+"/db.php",
            data: "action=load_allevents",
            dataType: 'json',
            cache:false,
            async:false,
            success: function (data) {
                var events = [];
                $.each(data, function (index) {
                    events.push({
                        "id"                : data[index].id,
                        "title"             : data[index].room + " (" + data[index].i + ")",
                        "description"       : data[index].room + " (" + data[index].i + ")",
                        "start"             : moment(data[index].startdate),
                        "end"               : moment(data[index].enddate),
                        "backgroundColor"   : data[index].color,
                        "textColor"         : "#000000"
                    });
                });
                callback(events);
                if (box)
                    box.remove();
                startRender = false;
            },
            error: function () { alert('Failed!'); }
        });
    },
    eventRender: function(event, element) {
        if (!startRender) {
            box = new ajaxLoader(".calendar");
            startRender = true;
        }
        element.qtip({ content: { text: $.ajax({url:"http://"+window.location.host+"/db.php?action=load_eventdetails&ID="+event.id, async:false}).responseText } });
    },
    eventMouseover: function(calEvent, jsEvent) { $(jsEvent.target).css('cursor','pointer'); },
    eventClick: function(calEvent, jsEvent, view) {
        alert(calEvent.id);
    }
});

因为我认为我第一次点击上一个月或下个月它无论如何都会激活eventRender事件所以我想检查它是否是第一次调用eventRender来加载微调器但它只在它完成时加载...什么我已经错过了?

提前致谢! 干杯 路易

1 个答案:

答案 0 :(得分:0)

eventRender用于在事件呈现时呈现内容。

例如:如果您想在每个活动标题的末尾添加自定义图片或更改活动的背景颜色,那么您可以使用此功能。

您必须使用“Loading”,以便在事件提取开始/停止时触发。

您还需要使用“lazyfetching”。

lazyFetching将允许您的日历在每次视图更改时获取事件(例如:prev / next clicked)以在视图中加载事件。所以它不会从缓存中获取。

使用eventAfterRender对工具提示进行编码,因此它将在事件渲染完成后触发。

lazyFetching: false,
loading: function(isLoading) {
    if (isLoading) {
        if (!startRender) {
        box = new ajaxLoader(".calendar");
        startRender = true;
        }
    }
    },
    eventAfterRender: function (view) {
    if (!startRender) {
        box = new ajaxLoader(".calendar");
        startRender = true;
    }
     element.qtip({ content: { text: $.ajax({url:"http://"+window.location.host+"/db.php?action=load_eventdetails&ID="+event.id, async:false}).responseText } });           
    },