Я ищу решение для отображения дополнительной информации в событии.
Например, в DayView вы видите событие с 06:00 до 10:00.
Я хочу отобразить дополнительное описание в этом событии (не только время и заголовок).
Показать больше текста в fullcalendar
Ответ 1
Я лично использую всплывающую подсказку для отображения дополнительной информации, поэтому, когда кто-то наводит курсор на событие, они могут просматривать более подробные описания. В этом примере используется 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'
}
}
});
}
});
});
Ответ 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);
}
});
}
Ответ 3
С модификацией одной строки вы можете изменить fullcalendar.js script, чтобы разрешить разрыв строки и поместить несколько информации в одну строку.
В FullCalendar.js на строке ~ 3922 найдите функцию 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 />');
}
Это позволит вам иметь несколько строк для заголовка, разделяя информацию. Пример замените event.title на title: 'All Day Event' + '< br/ > ' + 'Другое описание'
Ответ 4
Здесь мой код для всплывающего окна с использованием 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);
},
});
}());
});
Ответ 5
По какой-то причине я должен использовать
element.find('.fc-event-inner').empty();
чтобы заставить его работать, я думаю, что я в дневном режиме.
Ответ 6
как возможное решение: Добавьте еще немного контента в заголовок. Перезапишите этот стиль css:
.fc-day-grid-event .fc-content {
white-space: normal;
}
Ответ 7
Ну, я нашел для меня более простое решение:
Я изменил 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;
}
теперь он только обертывается, когда ему нужно.
Ответ 8
Мне нужна была возможность отображать совсем немного информации (без всплывающей подсказки), и это оказалось довольно неплохо. Я использовал FullCalendars title пропеллер хранить весь мой 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();
Я бы использовал шаблонные литералы, но должен был поддерживать IE11
Ответ 9
Я бы рекомендовал использовать обратный вызов eventAfterRender вместо eventRender. Действительно, если вы используете eventRender, вы можете поставить под угрозу правильное отображение событий, в кофе script, это что-то вроде:
$("#calendar").fullCalendar
eventAfterRender: (event, element) ->
element.find('.fc-title').after("<span>"+event.description+"</span>")