我现在用的是FullCalendar UI从数据库表中显示日历事件。
那我遇到的问题是,当我有一个事件在持续时间长不超过1小时,该事件的受试者不会是可行的。 我附上的截图向您展示如何,目前正在显示它。
当在第一事件看“IT会议”它似乎没有问题。 在另一方面,下一个事件(即,开始于下午5点24 - 6:00 PM)所述对象是不可读。 我怎么还是能做些什么来使主体活力,使用户知道他/她已经安排?
谢谢
我现在用的是FullCalendar UI从数据库表中显示日历事件。
那我遇到的问题是,当我有一个事件在持续时间长不超过1小时,该事件的受试者不会是可行的。 我附上的截图向您展示如何,目前正在显示它。
当在第一事件看“IT会议”它似乎没有问题。 在另一方面,下一个事件(即,开始于下午5点24 - 6:00 PM)所述对象是不可读。 我怎么还是能做些什么来使主体活力,使用户知道他/她已经安排?
谢谢
为了解决这个问题,我用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)
}
});
}
});
});
编辑! 从迈克的@MikeSmithDev回复最新的股票版本fullcalendar 2.1.1为您处理此:
你的问题与日历的造型做。 因此,它没有意义的(使用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代码,否则,你将不得不使用“!重要的”覆盖原代码。
从您的评论“有没有办法,我可以只是把的时间标题旁边时存在溢出?”
是。 假设你正在使用至少FullCalendar 2.1.1,时间被置于一个div类.fc-time
和标题具有一流的.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);
}
所以这是一个有点过分,但它显示了一些激烈的操纵时间/标题。 我还通过把更多的信息在自举模式或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 );
}
虽然我会告诫说,我用eventRender东西在旧版本FullCalendar的,但在2.1.1进行测试时,因为它是适当调整显示它甚至没有似乎有必要。 因此,它可能只是作为升级一样简单。 如果没有,你可以使用eventRender功能(虽然旧版本我认为这是一个不同的类像FC-事件时间或东西)。
依然采用了eventRender
回调(如MarCrazyness建议 ),你可以改变HTML集团任何你喜欢的方式:
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);
}
}
我下载了fullcalendar 2.1.1新版本和解决的问题。
我猜的版本是我使用过的错误。