FullCalendar - 是否可以更改结束时间的位置？

Question

Answer 1

看看代码，我找不到一个非常简单的方法来做到这一点。原因是，当你添加结束时间时，它会被添加到开始时间跨度中，所以这是我提出的解决方案：

$('#cal').fullCalendar({
    'events': test,
    'timeFormat': 'H:mm - {H:mm}'
});

$('.fc-event-time').each(function() {
    var obj = $(this);
    var parent = $(this).parent();
    var time = $(this).text();
    var start = time.split(' - ')[0];
    var finish = time.split(' - ')[1];
    obj.text(start);
    parent.append('<span class="fc-event-time" style="float: right;">' + finish + '</span>');
});

See it working here

• 首先，将'timeFormat'添加到日历（我假设您已经让它显示完成时间），给时间分隔{{1} } （这将允许分裂两次）
  • 注意 -内的任何时间都是完成时间。
• 接下来让jQuery循环使用类{} （由fullCalendar添加到时间）的每个元素。
• 现在我们需要掌握时间的父级，以便稍后可以添加元素。
• 下一步得到时间并在fc-event-time （空间划线空间）
上分开
• 现在设置原始持有者既有开始也有结束，所以它只是一个开始。
• 现在将另一个span元素添加到父级，即事件的标题，但将其浮动到右侧并添加完成时间。

---

根据justkt的评论，我认为，上面发布的方法只会在页面加载时运行，因此当您更改视图时，它不会再次运行。
要解决此问题，请在呈现事件时添加回调：

-

See it working here

这需要更多逻辑添加它，事件渲染似乎为每个事件调用，所以当添加完成时间跨度时，下次循环运行时它会尝试分割完成时间，所以停止添加一个班级$('#cal').fullCalendar({ 'events': test, 'eventRender' : renderEvents, 'timeFormat': 'H:mm - {H:mm}', }); function renderEvents(){ $('.fc-event-time').each(function() { var obj = $(this); if (!obj.hasClass('finish-moved')) { var parent = $(this).parent(); var time = $(this).text(); var start = time.split(' - ')[0]; var finish = time.split(' - ')[1]; obj.text(start); parent.append('<span class="fc-event-time finish-moved" style="float: right;">' + finish + '</span>'); obj.addClass('finish-moved'); } }); } ，以便它不会再次受到影响。

---

根据justkt的评论再次进行了更新：

当调用回调时，它将传递它正在影响的对象，因此你可以“操作”它，而不是运行多个循环：

finish-moved

See it working here

这是一个非常相似的主体，只是对事件进行操作，该事件调用了回调，因此应该减少资源消耗。