Question

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

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

在观看第一个活动＆＃34; IT Meeting＆＃34;它看起来没有问题。另一方面，下一个事件（即从下午5:24 - 下午6:00开始）主题是不可读的。如何或如何才能使主题可行，以便用户知道他/她已安排的内容？

谢谢

enter image description here

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)
            }
        });
        }
    });
});

EDIT！来自Mike的@MikeSmithDev回复，fullcalendar 2.1.1的最新版本为您处理： enter image description here

Answer 2

从您的评论＆＃34;有没有一种方法可以将标题放在出现溢出的时间旁边？＆＃34;

是。假设您至少使用了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 = '<span class="someCoolClass"> ' + event.title + "</span>";
    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 = "<br>"; /*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 3

仍然使用eventRender回调（作为MarCrazyness suggested），您可以随意更改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 4

您的问题与日历的样式有关。因此，改变功能中的任何内容都没有意义（使用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;}

活动的标题将写在时间段旁边。

功能上没有任何内容。

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

Answer 5

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

我想我使用的版本有一个错误。

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

5 个答案: