Question

我正在尝试编写一个基于FullCalendar包的简单应用程序。当我运行代码时，没有任何事件被渲染，但是在点击一天之后，当天就会显示一个事件。如果我马上点击另一天，它将删除最后一天，并显示最近的那一天。

CalEvents = new Mongo.Collection("calevents");
// to be used later to handle editing


if (Meteor.isClient) {
    Session.setDefault("event2edit", null);
    Session.setDefault("showEditWindow", false);
    Session.setDefault("lastMod", null);
    Router.route('/', function () {
        this.render('home');
    });

    Router.route('/calendar', function () {
        this.render('calendar');
    });

    // runs when page has been rendered
    Template.calendar.rendered = function () {
        $('#calendar').fullCalendar({

            events: function (start, end, timezone, callback) {
                var events = [];
                calEvents = CalEvents.find();
                calEvents.forEach(function (evt) {
                    events.push({
                        id: evt._id,
                        title: evt.title,
                        start: evt.start,
                        end: evt.end
                    });
                });
                //alert(events.length);
                callback(events);
            },
            dayClick: function(date, jsEvent, view){

                CalEvents.insert({title:'NEW', start:date, end:date});
                Session.set('lastMod', new Date());
                updateCalendar();
            },
            eventClick: function (calEvent, jsEvent, view) {

            }
        });
    }

    Template.calendar.lastMod = function () {
        return Session.get('lastMod');
    }
}

var updateCalendar = function(){
    $('#calendar').fullCalendar( 'refetchEvents' );
}

if (Meteor.isServer) {
    Meteor.startup(function () {
        // code to run on server at startup
    });
}

这是一个错误吗？或者我的代码遗漏了什么？谢谢。

Answer 1

尝试打包

$('#calendar').fullCalendar({

变成一个变量，比如

 calendar = $('#calendar').fullCalendar({

并添加以下关闭日历功能：

 }).data().fullCalendar

并在Tracker.autorun块的末尾插入Template.calendar.rendered函数：

    Template.calendar.rendered = function () {
        calendar = $('#calendar').fullCalendar({

            events: function (start, end, timezone, callback) {
                var events = [];
                calEvents = CalEvents.find();
                calEvents.forEach(function (evt) {
                    events.push({
                        id: evt._id,
                        title: evt.title,
                        start: evt.start,
                        end: evt.end
                    });
                });
                //alert(events.length);
                callback(events);
            },
            dayClick: function(date, jsEvent, view){

                CalEvents.insert({title:'NEW', start:date, end:date});
                Session.set('lastMod', new Date());
                updateCalendar();
            },
            eventClick: function (calEvent, jsEvent, view) {

            }

        }).data().fullCalendar

        Tracker.autorun(function(){
            allReqsCursor = CalEvents.find().fetch();
            if(calendar) calendar.refetchEvents();
        });
};

此外，为了提高效果：

For-Loop vs forEach Loop

您可以考虑使用for - 循环代替forEach - 循环，因为前者的速度提高了10到40倍，尤其是使用预先缓存的参数i和len ：

forEach Loop：（原来）

        calEvents = CalEvents.find();
        calEvents.forEach(function(evt) {
            events.push({
                id: evt._id,
                title: evt.t,
                start: evt.s,
                end: evt.e,
            });
        });
        callback(events);

for循环：（使用预先缓存的参数i和len，速度提高10到40倍）

        calEvents = CalEvents.find().fetch();
        var len = calEvents.length, i = 0; //pre-cache the i and len
        for(i; i < len; i++){
           events.push({
                id: calEvents[i]._id,
                title: calEvents[i].t,
                start: calEvents[i].s,
                end: calEvents[i].e,
            });
        };
        callback(events);

希望这有帮助。

FullCalendar仅呈现单个事件

1 个答案: