将事件添加到 FullCalendar 导致事件行容器跨单元格网格绘制

Question

我是一名初学者级 Meteor 开发人员，正在从事一个包含 FullCalendar 日历的项目。

我附上了一张关于如何在日历上呈现事件的屏幕截图。如您所见，粗略的红色圆圈突出了我的问题。据我了解，出现此问题是由于表格行在单元格网格上绘制。我该如何解决这个问题？

这是来自我的onRendered() 函数的代码：

Template.calendar.onRendered(() => {
  $('#events-calendar').fullCalendar({
    // NOTE: Put your options and callbacks here.

    events(start, end, timezone, callback) {
      let data = Events.find().fetch().map((event) => {
        event.editable = !isPast(event.start);
        return event;
      });

      if (data) {
        callback(data);
      }
    }
  });

  // NOTE: Assures the calendar updates when the DB updates (refecthEvents).
  Tracker.autorun(() => {
    Events.find().fetch();
    $('#events-calendar').fullCalendar('refetchEvents');
  });
});

任何帮助或见解将不胜感激。

Answer 1

我想说的就是像下面给出的例子那样玩 css。

  eventRender( event, element ) {
     element.find( '.fc-content' ).html(
    `<h4>${ event.title }</h4>
     <p class="guest-count">${ event.guests } Guests</p>
     <p class="type-${ event.type }">#${ event.type }</p>
    `
  );

您可能希望查看此教程meteorchef 教程以供进一步参考。