繁体   English   中英

fullcalendar无法使用流星正确渲染

[英]fullcalendar not rendering correctly with meteor

另一种尝试将其排序。 我在https://github.com/pnunn/testFullCalendar创建了一个回购协议,该回购协议有一个正在运行的流星应用程序,该应用程序显示了流星无法正确渲染日历的问题。

首次加载时,日历上没有可见的事件。 导航至上个月或下个月,然后再次返回,然后神奇地出现了事件。 如果单击事件并更改其中一个复选框(事件颜色应更改),则直到完全手动刷新页面后,该事件才完全或完全不呈现。

谁能告诉我如何解决这个问题? 我尝试过调用re-render,eventRender和日历文档中的函数的每种组合,但是还没有破解神奇的方法。

谢谢。

彼得

您的问题的解决方法在https://github.com/parhelium/testFullCalendar中

首先,需要引用Calendar实例

calendar =  $('#calendar').fullCalendar({...}).data().fullCalendar;

使用Requests.find()的函数可以与Deps.autorun包装在一起,以便在每次Requests集合更新时重新运行它:

    Template.packLayout.rendered = function(){

  calendar = $('#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({},{reactive:false});
      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',
  }).data().fullCalendar;

  Deps.autorun(function(){
    allReqsCursor = Requests.find().fetch();
    console.log("Autorun -> ", allReqsCursor.length)
    if(calendar)
        calendar.refetchEvents();
  })
};

根据最新的Meteor 1.5.2(截至日期)和fullcalendar:fullcalendar下面的fullcalendar:fullcalendar是工作代码,

Template.packLayout.rendered = function(){
  calendar = $('#calendar').fullCalendar({
    events: function(start, end, timezone, callback) { // timezone added here
      // same code
    },
    editable:true,
    weekMode: 'liquid',
  }).data().fullCalendar;

  this.autorun(function(){ // Deps.autorun replaced here
    // same code
  })
};

注意: function( start, end, timezone, callback ) { }是根据[ https://fullcalendar.io/docs/event_data/events_function/][1]的最新events方法。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM