在fullcalendar中显示更多文本

我喜欢fullcalendar的JQuery插件。 目前我正在寻找解决scheme来显示更多的信息。 例如，在DayView中，您可以从06:00到10:00看到一个事件。 现在我想在这个事件中显示一个额外的描述（不仅是时间和标题）。

Answer 1

我个人使用工具提示来显示其他信息，所以当有人在事件hover时，他们可以查看更长的描述。 这个例子使用qTip ，但是任何工具提示实现都可以工作。

$(document).ready(function() { var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); $('#calendar').fullCalendar({ header: { left: 'prev, next today', center: 'title', right: 'month, basicWeek, basicDay' }, //events: "Calendar.asmx/EventList", //defaultView: 'dayView', events: [ { title: 'All Day Event', start: new Date(y, m, 1), description: 'long description', id: 1 }, { title: 'Long Event', start: new Date(y, m, d - 5), end: new Date(y, m, 1), description: 'long description3', id: 2 }], eventRender: function(event, element) { element.qtip({ content: event.description + '<br />' + event.start, style: { background: 'black', color: '#FFFFFF' }, position: { corner: { target: 'center', tooltip: 'bottomMiddle' } } }); } }); }); 

Answer 2

此代码可以帮助您：

 $(document).ready(function() { $('#calendar').fullCalendar({ events: [ { id: 1, title: First Event', start: ......., end: ....., description: 'first description' }, { id: 2, title: 'Second Event', start: ......., end: ....., description: 'second description' } ], eventRender: function(event, element) { element.find('.fc-title').append("<br/>" + event.description); } }); } 

Answer 3

通过修改单行，您可以更改fullcalendar.js脚本以允许换行并将多个信息放在同一行上。

在〜3922行FullCalendar.js中findhtmlEscape（s）函数并添加.replace（/ <br \ s？/？> / g，'
'）到它的结尾。

 function htmlEscape(s) { return s.replace(/&/g, '&amp;') .replace(/</g, '&lt;') .replace(/>/g, '&gt;') .replace(/'/g, '&#039;') .replace(/"/g, '&quot;') .replace(/\n/g, '<br />') .replace(/&lt;br\s?\/?&gt;/g, '<br />'); } 

这将允许你有多行标题，分隔信息。 示例用标题replaceevent.title：“全天事件”+“<br />”+“其他描述”

Answer 4

这里是我使用qTip2和eventMouseoverpopup的代码：

 $(document).ready(function() { // Setup FullCalendar // Setup FullCalendar (function() { var date = new Date(); var d = date.getDate(); var m = date.getMonth(); var y = date.getFullYear(); var day=date.toLocaleDateString(); var tooltip = $('<div/>').qtip({ id: 'fullcalendar', prerender: true, content: { text: ' ', title: { button: true } }, position: { my: 'bottom center', at: 'top center', target: 'mouse', viewport: $('#fullcalendar'), adjust: { mouse: false, scroll: false } }, show: false, hide: false, style: 'qtip-light' }).qtip('api'); $('#fullcalendar').fullCalendar({ editable: true, disableDragging: true, height: 600, header: { left: 'title', center: '', right: 'today prev,next' }, dayClick: function() { tooltip.hide() }, eventResizeStart: function() { tooltip.hide() }, eventDragStart: function() { tooltip.hide() }, viewDisplay: function() { tooltip.hide() }, events: [ { title: 'All Day Event', start: new Date(2014, 3, 1) }, { title: 'Long Event', start: new Date(y, m, d-5), end: new Date(y, m, d-2) }, { id: 999, title: 'Repeating Event', start: new Date(y, m, d+4, 16, 0), allDay: false }, { title: 'Meeting', start: new Date(y, m, d, 10, 30), allDay: false }, { title: 'Spring Membership Conference', start: new Date(y, m, d+6, 7,0), end: new Date(y, m, d+6, 13,0), allDay: false, description:'save the date! Join us for our Annual Membership Conference. Breakfast will be served beginning at 7:30 am Featuring The EFEC Belief System & Our Pledge lunch' }, { title: 'Birthday Party', start: new Date(y, m, d+1, 19, 0), end: new Date(y, m, d+1, 22, 30), allDay: false } ], eventMouseover : function(data, event, view) { var content = '<p>'+data.description +'<p>'+ '<h3>'+data.title+'</h3>' + '<p><b>Start:</b> '+data.start+'<br />' + (data.end && '<p><b>End:</b> '+data.end+'</p>' || ''); tooltip.set({ 'content.text': content }) .reposition(event).show(event); }, }); }()); }); 

Answer 5

作为一个可能的解决scheme：为标题添加一些额外的内容。 覆盖这个CSS风格：

  .fc-day-grid-event .fc-content { white-space: normal; } 

Answer 6

那么我find了一个更简单的解决scheme：

我改变了fullcalendar.css

并添加了以下内容：

 float: left; clear: none; margin-right: 10px; 

导致：

 .fc-event-time, .fc-event-title { padding: 0 1px; float: left; clear: none; margin-right: 10px; } 

现在只有在需要的时候才会包装。

Answer 7

出于某种原因，我必须使用

 element.find('.fc-event-inner').empty(); 

为了使它工作，我想我是在白天。

Answer 8

我会build议使用eventAfterRendercallback，而不是eventRender。 事实上，如果你使用eventRender，你可能会危害正确的事件显示，在咖啡脚本中，它是这样的：

 $("#calendar").fullCalendar eventAfterRender: (event, element) -> element.find('.fc-title').after("<span>"+event.description+"</span>")