周视图Fullcalendar中每行一个事件

One event per row in weekview Fullcalendar

本文关键字：一个 事件 视图 Fullcalendar 周视图      更新时间：2023-09-26

我正在使用完整日历作为计划工具。为了清楚地了解每个人都在做什么，我希望在新行中显示每个事件（fc事件容器），而不是像这样。

现在：完整日历周视图示例1

我希望新事件显示在一个带有间隔<td/>的新<tr>中，就像FullCalendar周视图示例1 中底部的事件一样

我希望它是这样的：完整日历周视图示例2

我在浏览器中这样黑了它：

<tr>
  <td></td>
  <td></td>
  <td></td>
  <td class="fc-event-container" colspan="2">
    <a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end">
      <div class="fc-content">
       <span class="fc-time">00</span> 
       <span class="fc-title">Dirk Blaauw - asdfg</span>
      </div>
     </a>
  </td>
</tr>

在第一个例子中，这个fullcalendar.js函数已经为最低的事件自动完成了，我相信：

renderFill:函数（类型，segs，className）

有人能帮我在一个新的TR上获得每个事件，并且仍然获得正确的间隔吗？

仅供参考：这些是我们使用的选项和数据：

$(document).ready(function() {
    $('#calendarWeek').fullCalendar({
        defaultView: 'basicWeek',
        weekends: false,
        events:[   <?php foreach($cal_data as $c): ?>
        {
                    title: '<?php echo $c['assigned_to'] . ' - ' . $c['activity'];?>', 
                    start: '<?php echo $c['start'];?>',
                    end: '<?php echo $c['end'];?>T23:59:00'
        },
                <?php endforeach;?>
        ]
    });
});

fullcalendar.js中的以下函数确保如果合适，两个事件都打印在同一行中。

function isDaySegCollision(seg, otherSegs){
logic
}

确保这两个条件都返回true。

这有点难，但我不知道如何做得更好。这可能对其他完整日历用户有所帮助。

相关文章：