如何在不剪切日历事件的主题的情况下显示它 – 使用FullCalendar UI

我正在使用FullCalendar UI来显示数据库中表的日历事件。

我遇到的问题是，当我的事件持续时间不到1小时时，该事件的主题将不可行。 我附上了一个屏幕截图，向您展示它当前是如何显示的。

在查看第一个事件“IT会议”时，它似乎没有问题。 另一方面，下一个事件（即从下午5:24 – 下午6:00开始）主题是不可读的。 如何或如何才能使主题可行，以便用户知道他/她已安排的内容？

谢谢

Answer 1

为了解决这个问题，我使用了http://qtip2.com/ 。 （对于fullcalendar的早期版本）

http://jsfiddle.net/marcrazyness/cjn4vxbm/

$(document).ready(function () { $('#myCalendar').fullCalendar({ events: [ { title: 'event', start: '2014-10-01', description: 'My Event Description', allDay: true } ], eventRender: function(event, element) { // Here using qtip to set hover message. element.qtip({ content: event.description, // Position (optional) position: { my: 'center center', at: 'center center', target: $(element) } }); } }); }); 

编辑！ 来自Mike的@MikeSmithDev回复，fullcalendar 2.1.1的最新版本为您处理：

Answer 2

您的问题与日历的样式有关。 所以改变function中的任何东西都是没有意义的（使用JS）。

我会推荐以下CSS代码：

 .fc-view.fc-agendaDay-view.fc-agenda-view .fc-time-grid-event.fc-event .fc-content .fc-time {display:inline-block;} .fc-view.fc-agendaDay-view.fc-agenda-view .fc-time-grid-event.fc-event .fc-content .fc-title {display:inline-block; margin-left:7px;} 

事件的标题将写在时间块旁边。

function上没有任何损坏。

请记住，在加载此插件的初始CSS代码后，您需要编写此CSS代码，否则，您必须使用“！important”来覆盖原始代码。

Answer 3

从你的评论“有没有办法，我可以把标题放在溢出的时间旁边？”

是。 假设您至少使用了FullCalendar 2.1.1，则将时间放在带有.fc-time类的div中，并且标题的类为.fc-title 。 所以，最简单的解决方法就是添加更新的样式：

 .fc-time {display:inline-block !important;} .fc-title {display: inline-block !important;} 

现在让我们说你不想那样，因为它太容易了，你需要用它做更多的操作。 所以，让我们用CSS隐藏标题，然后用时间塞进它：

将CSS更改为.fc-title {display: none;}

现在让我们改变eventRender

 eventRender: function (event, element) { var title = ' ' + event.title + ""; element.find('.fc-time').html(moment(event.start).format('h:mm') +" going until " + moment(event.end).format('h:mm') + title); } 

所以这有点过分，但它显示了时间/标题的一些激烈操纵。 如果您有兴趣，我还可以通过在boostrap模式或jQuery UI对话框中添加更多信息来完成类似的操作。

但这并没有回答你的另一个问题，那就是当出现溢出时只会这样做。 只有在30分钟或更短的时间内才这样做？ 所以将上面的eventRender更改为：

 eventRender: function (event, element) { var timeSpan = event.end - event.start; var delim = "
"; /*break between time and title*/ if (timeSpan <= 1800000) { /*30 min or less! Replace the break with a colon*/ delim = ": "; } element.find('.fc-time').html(moment(event.start).format('h:mm') +" - " + moment(event.end).format('h:mm') + delim + event.title ); } 

虽然我会告诫我在旧版本的FullCalendar上使用了eventRender，但是当在2.1.1上进行测试时，它甚至没有必要，因为它正在适当地调整显示。 因此，它可能与升级一样简单。 如果没有，你可以使用eventRender函数（虽然在旧版本上我认为它是一个不同的类，如fc-event-time或其他东西）。

Answer 4

仍然使用eventRender回调（如MarCrazyness建议的那样 ），您可以以任何方式更改html bloc：

 eventRender: function(event, element) { // event is the javascript object // element is the html bloc, which already contains // the time section, the body section etc... if (event.end - event.start < 1hour ) { //<- write the real code to check if this is less than an hour $(element).find('.fc-title').html(''); $(element).find('.fc-time').append(event.title); } } 

Answer 5

我下载了新版本的fullcalendar 2.1.1，解决了这个问题。

我想我使用的版本有一个bug。