Fullcalendar.io在一行中显示三个事件

Question

我使用的是fullcalendar.io，常规视图仅显示one event per row.我想要实现的是displaying three events in one row。这可以通过在一个<td>元素中放置三个链接来完成。这个td元素是由fullcalendar.io库生成的。

以下是我迄今为止所取得的成就：

for (i = 0; i < levelCnt; i++) { // iterate through all levels
  levelSegs = segLevels[i];
  col = 0;
  tr = $('<tr/>');

  segMatrix.push([]);
  cellMatrix.push([]);
  loneCellMatrix.push([]);

  // levelCnt might be 1 even though there are no actual levels. protect against this.
  // this single empty row is useful for styling.
  if (levelSegs) {

    var levelSegsDivided = Math.ceil(levelSegs.length / 3);

    iterationStart = 0;
    iterationEnd = 3;

    for (k = 0; k < levelSegsDivided; k++) {

      var elems;

      for (j = iterationStart; j < iterationEnd; j++) {
        seg = levelSegs[j];

        if (seg != null) {

          emptyCellsUntil(seg.leftCol);

          // create a container that occupies or more columns. append the event element.
          td = $('<td class="fc-event-container"/>').append(seg.el);
          console.log(seg.el);
          //if (seg.leftCol != seg.rightCol) {
          //    td.attr('colspan', seg.rightCol - seg.leftCol + 1);
          //}
          //else { // a single-column segment
          //    loneCellMatrix[i][col] = td;
          //}

          while (col <= seg.rightCol) {
            cellMatrix[i][col] = td;
            segMatrix[i][col] = seg;
            col++;
          }

          tr.append(td);

          iterationStart = iterationEnd;
          iterationEnd = iterationEnd + 3;
        }
      }
    }

    //for (j = 0; j < levelSegs.length; j++) { // iterate through segments in level
    //  seg = levelSegs[j];

    //  emptyCellsUntil(seg.leftCol);

    //  // create a container that occupies or more columns. append the event element.
    //  td = $('<td class="fc-event-container"/>').append(seg.el);
    //  if (seg.leftCol != seg.rightCol) {
    //    td.attr('colspan', seg.rightCol - seg.leftCol + 1);
    //  }
    //  else { // a single-column segment
    //    loneCellMatrix[i][col] = td;
    //  }

    //  while (col <= seg.rightCol) {
    //    cellMatrix[i][col] = td;
    //    segMatrix[i][col] = seg;
    //    col++;
    //  }

    //  tr.append(td);
    //}
}

emptyCellsUntil(colCnt); // finish off the row
this.bookendCells(tr);
tbody.append(tr);

}

以下常规库代码：

renderSegRow: function(row, rowSegs) {
  var colCnt = this.colCnt;
  var segLevels = this.buildSegLevels(rowSegs); // group into sub-arrays of levels
  var levelCnt = Math.max(1, segLevels.length); // ensure at least one level
  var tbody = $('<tbody/>');
  var segMatrix = []; // lookup for which segments are rendered into which level+col cells
  var cellMatrix = []; // lookup for all <td> elements of the level+col matrix
  var loneCellMatrix = []; // lookup for <td> elements that only take up a single column
  var i, levelSegs;
  var col;
  var tr;
  var j, seg;
  var td;

  // populates empty cells from the current column (`col`) to `endCol`
  function emptyCellsUntil(endCol) {
    while (col < endCol) {
      // try to grab a cell from the level above and extend its rowspan. otherwise, create a fresh cell
      td = (loneCellMatrix[i - 1] || [])[col];
      if (td) {
        td.attr(
          'rowspan',
          parseInt(td.attr('rowspan') || 1, 10) + 1
        );
      }
      else {
        td = $('<td/>');
        tr.append(td);
      }
      cellMatrix[i][col] = td;
      loneCellMatrix[i][col] = td;
      col++;
    }
  }

  for (i = 0; i < levelCnt; i++) { // iterate through all levels
    levelSegs = segLevels[i];
    col = 0;
    tr = $('<tr/>');

    segMatrix.push([]);
    cellMatrix.push([]);
    loneCellMatrix.push([]);

    // levelCnt might be 1 even though there are no actual levels. protect against this.
    // this single empty row is useful for styling.
    if (levelSegs) {
      for (j = 0; j < levelSegs.length; j++) { // iterate through segments in level
        seg = levelSegs[j];

        emptyCellsUntil(seg.leftCol);

        // create a container that occupies or more columns. append the event element.
        td = $('<td class="fc-event-container"/>').append(seg.el);
        if (seg.leftCol != seg.rightCol) {
          td.attr('colspan', seg.rightCol - seg.leftCol + 1);
        }
        else { // a single-column segment
          loneCellMatrix[i][col] = td;
        }

        while (col <= seg.rightCol) {
          cellMatrix[i][col] = td;
          segMatrix[i][col] = seg;
          col++;
        }

        tr.append(td);
      }
    }

    emptyCellsUntil(colCnt); // finish off the row
    this.bookendCells(tr);
    tbody.append(tr);
  }

  return { // a "rowStruct"
    row: row, // the row number
    tbodyEl: tbody,
    cellMatrix: cellMatrix,
    segMatrix: segMatrix,
    segLevels: segLevels,
    segs: rowSegs
  };
}