javascript - 将事件添加到 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教程以供进一步引用。