Question

I am using full calendar for a planning tool. To get a clear overview on what everyone is doing, I would love to display each event (fc-event-container) on a new row, instead of something like this.

Right now: FullCalendar weekview example1

I would like the new event to be displayed in a new <tr> with spacer <td/>s like it does for the bottom one in FullCalendar weekview example1

I would like it to be like this: FullCalendar weekview example2

I hacked it in the browser like this:

<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>

This was already done automatically for the lowest event in the first example, by this fullcalendar.js function, I believe:

renderFill: function(type, segs, className)

Can someone please help me to get each event on a new TR and still get the spacing right?

FYI: these are the options and data we used:

$(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;?>

        ]

    });
});

Answer 1

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

function isDaySegCollision(seg, otherSegs){
logic
}

确保两个条件都返回true。

这有点像黑客，但我不知道怎么做得更好。这对其他完整的日历用户可能会有所帮助。

One event per row in weekview Fullcalendar

1 个答案: