Javascript 在全日历中显示更多文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3408723/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display more Text in fullcalendar
提问by chichi
I am looking for a solution to display more information in event.
我正在寻找一种在事件中显示更多信息的解决方案。
For example in the DayView you see a event from 06:00 to 10:00.
I want to display a additional description in this event (not only the time and the title).
例如，在 DayView 中，您会看到从 06:00 到 10:00 的事件。
我想在此事件中显示附加说明（不仅是时间和标题）。
采纳答案by Jake1164
I personally use a tooltip to display additional information, so when someone hovers over the event they can view a longer descriptions. This example uses qTip, but any tooltip implementation would work.
我个人使用工具提示来显示附加信息，因此当有人将鼠标悬停在事件上时，他们可以查看更长的描述。此示例使用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'
}
}
});
}
});
});
回答by Eureka
This code can help you :
此代码可以帮助您：
$(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);
}
});
}
回答by Jake1164
With the modification of a single line you could alter the fullcalendar.js script to allow a line break and put multiple information on the same line.
通过修改一行，您可以更改 fullcalendar.js 脚本以允许换行并将多个信息放在同一行上。
In FullCalendar.js on line ~3922 find htmlEscape(s) function and add .replace(/<br\s?/?>/g, '
') to the end of it.
在 ~3922 行的 FullCalendar.js 中找到 htmlEscape(s) 函数并将 .replace(/<br\s?/?>/g, '
') 添加到它的末尾。
function htmlEscape(s) {
return s.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/'/g, ''')
.replace(/"/g, '"')
.replace(/\n/g, '<br />')
.replace(/<br\s?\/?>/g, '<br />');
}
This will allow you to have multiple lines for the title, separating the information. Example replace the event.title with title: 'All Day Event' + '<br />' + 'Other Description'
这将允许您有多行标题，分隔信息。示例将 event.title 替换为标题：'All Day Event' + '<br />' + 'Other Description'
回答by DolceVita
as a possible solution: Add some extra more content to the title. Overwrite this css style:
作为可能的解决方案：在标题中添加一些额外的内容。覆盖此 css 样式：
.fc-day-grid-event .fc-content {
white-space: normal;
}
回答by sunilkjt
Here's my code for popup using qTip2 and eventMouseover:
这是我使用 qTip2 和弹出窗口的代码eventMouseover：
$(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 a.m. 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);
},
});
}());
});
回答by windmaomao
For some reason, I have to use
出于某种原因，我必须使用
element.find('.fc-event-inner').empty();
to make it work, i guess i'm in day view.
为了让它工作，我想我在白天。
回答by Ronnie
I needed the ability to display quite a bit of info (without a tooltip) and it turned out quite nice. I used FullCalendars titleprop to store all my HTML. The only thing you have to do to ensure it works after render is to parse the title fields HTML.
我需要能够显示相当多的信息（没有工具提示），结果非常好。我使用 FullCalendarstitle道具来存储我所有的 HTML。为确保它在渲染后正常工作，您唯一要做的就是解析标题字段 HTML。
// `data` ismy JSON object.
$.each(data, function(index, value) {
value.title = '<div class="title">' + value.title + '</div>';
value.title += '<div class="deets"><span class="time"><img src="/themes/custom/bp/images/clock.svg">' + value.start_time + ' - ' + value.end_time + '</span>';
value.title += '<span class="location"><img src="/themes/custom/bp/images/pin.svg">' + value.location + '</span></div>';
value.title += '<div class="learn-more">LEARN MORE <span class="arrow"></span></span>';
});
// Initialize the calendar object.
calendar = new FullCalendar.Calendar(cal, {
events: data,
plugins: ['dayGrid'],
eventRender: function(event) {
// This is required to parse the HTML.
const title = $(event.el).find('.fc-title');
title.html(title.text());
}
});
calendar.render();
I would have used template literals, but had to support IE11
我会使用模板文字，但必须支持 IE11
回答by Ronnie
Well i found a simpler solution for me:
好吧，我为我找到了一个更简单的解决方案：
I changed fullcalendar.css
我改变了 fullcalendar.css
and added the following:
并添加了以下内容：
float: left;
clear: none;
margin-right: 10px;
Resulting in:
导致：
.fc-event-time,
.fc-event-title {
padding: 0 1px;
float: left;
clear: none;
margin-right: 10px;
}
now it only wraps when it needs to.
现在它只在需要时包装。
回答by Sylvain Martin Saint Léon
I would recommend the use of the eventAfterRender callback instead of eventRender. Indeed if you use eventRender you might jeopardize the correct display of the events, in coffee script, it something like :
我建议使用 eventAfterRender 回调而不是 eventRender。事实上，如果你使用 eventRender 你可能会危及事件的正确显示，在咖啡脚本中，它类似于：
$("#calendar").fullCalendar
eventAfterRender: (event, element) ->
element.find('.fc-title').after("<span>"+event.description+"</span>")
