我使用 Fullcalendar.io v2

在我的 agendaWeek 模组中，我有事件，所有事件都显示在日广场的一行中。所以，我有更多的事件，然后是更薄的事件 block 。

如何每行显示一个事件？就像在 month mod 中一样。我有更多的事件，然后更高的日 block 将我(高度)。也许，很难使用像eventRender这样的函数，因为如果你检查.fs-event元素(web开发者工具)，你会看到事件 block 使用了position :absolute;top:300px;left:33%...所以我不知道该怎么做。

我想要这样的东西:

最佳答案

我也被那个问题困住了，这非常困难，因为插件以一种奇怪的方式组成日历，使用一些表格并使用 absolute 动态定位事件并改变 css 顶级 属性。

但是我找到了一个非常有效的通用解决方案。首先，我将向您展示代码，然后我将向他们解释代码的具体作用。

我使用选项 eventAfterAllRender的完整日历。这是 example working .

我使用 moment为了管理时间，我假设 fullCalendar html 元素的 ID 是“Calendar”。

eventAfterAllRender: function() {

    // define static values, use this values to vary the event item height
    var defaultItemHeight = 25;
    var defaultEventItemHeight = 18;
    // ...

    // find all rows and define a function to select one row with an specific time
    var rows = [];
    $('div.fc-slats > table > tbody > tr[data-time]').each(function() {
      rows.push($(this));
    });
    var rowIndex = 0;
    var getRowElement = function(time) {
      while (rowIndex < rows.length && moment(rows[rowIndex].attr('data-time'), ['HH:mm:ss']) <= time) {
        rowIndex++;
      }
      var selectedIndex = rowIndex - 1;
      return selectedIndex >= 0 ? rows[selectedIndex] : null;
    };

    // reorder events items position and increment row height when is necessary
    $('div.fc-content-col > div.fc-event-container').each(function() {  // for-each week column
      var accumulator = 0;
      var previousRowElement = null;

      $(this).find('> a.fc-time-grid-event.fc-v-event.fc-event.fc-start.fc-end').each(function() {  // for-each event on week column
        // select the current event time and its row
        var currentEventTime = moment($(this).find('> div.fc-content > div.fc-time').attr('data-full'), ['h:mm A']);
        var currentEventRowElement = getRowElement(currentEventTime);

        // the current row has to more than one item
        if (currentEventRowElement === previousRowElement) {
          accumulator++;

          // move down the event (with margin-top prop. IT HAS TO BE THAT PROPERTY TO AVOID CONFLICTS WITH FullCalendar BEHAVIOR)
          $(this).css('margin-top', '+=' + (accumulator * defaultItemHeight).toString() + 'px');

          // increse the heigth of current row if it overcome its current max-items
          var maxItemsOnRow = currentEventRowElement.attr('data-max-items') || 1;
          if (accumulator >= maxItemsOnRow) {
            currentEventRowElement.attr('data-max-items', accumulator + 1);
            currentEventRowElement.css('height', '+=' + defaultItemHeight.toString() + 'px');
          }
        } else {
          // reset count
          rowIndex = 0;
          accumulator = 0;
        }

        // set default styles for event item and update previosRow
        $(this).css('left', '0');
        $(this).css('right', '7px');
        $(this).css('height', defaultEventItemHeight.toString() + 'px');
        $(this).css('margin-right', '0');
        previousRowElement = currentEventRowElement;
      });
    });

    // this is used for re-paint the calendar
    $('#calendar').fullCalendar('option', 'aspectRatio', $('#calendar').fullCalendar('option', 'aspectRatio'));
  }

代码的工作原理:

首先，我找到了所有 tr 元素，它们是我日历的行(请注意，它们包含一个具有自己时间的属性)。

稍后，我对每一列进行迭代，并为每一列获取其事件项。每个事件项都是一个 anchor 元素，带有一些内部子元素，日期作为属性 data-full。

从事件中我可以看到它的行应该是什么，如果该行中有多个元素，则增加事件元素所在的位置。我为此使用 margin-top 属性，因为该属性未被插件使用或重新调整(请勿使用 top 属性)。

在行中，我设置了一个数据属性，以获取具有该行任何列的最大事件数。这样，我就可以计算该行是否必须增加其高度。

好吧，这基本上就是代码的作用。如果您有任何问题，请回答。

关于javascript - 全日历.io : how to display one event per line in agendaWeek then mix all in one?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32112606/