Question

我正在项目中使用bootstrap3 pretty-fullcalendar并预先启动，当我更改某个事件的某些属性（例如颜色）时，它会立即反映在日历上的显示中。现在，当我更改属性时，我必须手动重新加载日历以显示更改。

我将模板渲染功能中的日历实例化为

Template.packLayout.rendered = function(){
  $('#calendar').fullCalendar({
      //dayClick:function( date, allDay, jsEvent, view ) {
      //  Requests.insert({title:'Request',start:date,end:date,color:'red',className:'todo'});
      //  Session.set('lastMod',new Date());
      //},
      eventClick:function(reqEvent,jsEvent,view){
        Session.set('editingReqEvent',reqEvent.id);
        Session.set('showEditEvent',true);
      },
      eventDrop:function(reqEvent){
        Requests.update(reqEvent.id, {$set: {start:reqEvent.start,end:reqEvent.end}});
        Session.set('lastMod',new Date());
      },
      events: function(start, end, callback) {
        var events = [];
        reqEvents = Requests.find();
        reqEvents.forEach(function(evt){
          event = {id:evt._id,title:evt.title,start:evt.start,end:evt.end,color:evt.color};
          events.push(event);
        })
        callback(events);
      },
      editable:true,
      weekMode: 'liquid'
    });
}

有什么改变会导致这种情况发生吗？

Answer 1

以下是我设法让它发挥作用的方式：

1）按照＆＃34;呈现＆＃34;

保留您的日历代码

Template.calendar.rendered = function () {
    console.log('Calendar - running redered');
    Session.set('calendarTemplateRendered', true);
    var entries = Calendar.find().fetch(),
        $calendar = $('#calendar');

    $calendar.html('').fullCalendar({
        header: {
            left: '',
            center: '',
            right: ''
        },
        contentHeight: 1100,
        defaultDate: '2014-01-12',
        defaultView: 'agendaWeek',
        editable: true,
        selectable: true,
        selectHelper: true,
        select: function (start, end) {
            var title = prompt('Event Title:');
            var eventData;
            if (title) {
                eventData = {
                    title: title,
                    start: start,
                    end: end
                };
                $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
            }
            $('#calendar').fullCalendar('unselect');
        },
        events: entries
    });

添加自动运行：

Deps.autorun(function () {
    if (Session.equals('calendarTemplateRendered', false) ||
        !calendarSubs.ready() ||
        typeof Calendar === 'undefined') {
        console.log('exiting because there is no objects to process');
        return;
    }

    console.log('trying to autorun');
    var entries = Calendar.find().fetch(),
       $calendar = $('#calendar');
    $calendar.fullCalendar('removeEvents');
    $calendar.fullCalendar('addEventSource', entries);
    $calendar.fullCalendar('rerenderEvents');
}

Blaze将为您完成剩余工作 - （正确重绘UI）。现在，您可以根据需要修改日历订阅，它将完美运行。

bootstrap3 pretty-fullcalendar流星在大火中没有反应

1 个答案: