Afficher plus de texte dans le calendrier complet
Je recherche une solution pour afficher plus d'informations en cas d'événement.
Par exemple, dans DayView, vous voyez un événement de 06h00 à 10h00.
Je souhaite afficher une description supplémentaire dans cet événement (pas seulement l'heure et le titre).
J'utilise personnellement une info-bulle pour afficher des informations supplémentaires, donc quand quelqu'un survole l'événement, il peut afficher une description plus longue. Cet exemple utilise qTip , mais toute implémentation d'infobulle fonctionnerait.
$(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'
}
}
});
}
});
});
Ce code peut vous aider:
$(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);
}
});
}
Avec la modification d'une seule ligne, vous pouvez modifier le script fullcalendar.js pour permettre un saut de ligne et mettre plusieurs informations sur la même ligne.
Dans FullCalendar.js en ligne ~ 3922, recherchez la fonction htmlEscape (s) et ajoutez .replace (/ <br\s? /?>/G, '
') jusqu'à la fin.
function htmlEscape(s) {
return s.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/'/g, ''')
.replace(/"/g, '"')
.replace(/\n/g, '<br />')
.replace(/<br\s?\/?>/g, '<br />');
}
Cela vous permettra d'avoir plusieurs lignes pour le titre, séparant les informations. Exemple remplacez event.title par le titre: 'All Day Event' + '<br />' + 'Other Description'
Voici mon code pour popup en utilisant qTip2 et 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);
},
});
}());
});
comme solution possible: ajoutez un peu plus de contenu au titre. Remplacez ce style CSS:
.fc-day-grid-event .fc-content {
white-space: normal;
}
Pour une raison quelconque, je dois utiliser
element.find('.fc-event-inner').empty();
pour le faire fonctionner, je suppose que je suis en vue de jour.
J'avais besoin de pouvoir afficher pas mal d'informations (sans info-bulle) et cela s'est avéré plutôt agréable. J'ai utilisé FullCalendars title prop pour stocker tout mon HTML. La seule chose que vous devez faire pour vous assurer que cela fonctionne après le rendu est d'analyser les champs de titre 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();
J'aurais utilisé des littéraux de modèle, mais je devais prendre en charge IE11
Eh bien, j'ai trouvé une solution plus simple pour moi:
J'ai changé fullcalendar.css
et a ajouté ce qui suit:
float: left;
clear: none;
margin-right: 10px;
Résultant en:
.fc-event-time,
.fc-event-title {
padding: 0 1px;
float: left;
clear: none;
margin-right: 10px;
}
maintenant, il ne s'enroule que quand il le faut.
Je recommanderais l'utilisation du rappel eventAfterRender au lieu de eventRender. En effet, si vous utilisez eventRender, vous risquez de compromettre l'affichage correct des événements.
$("#calendar").fullCalendar
eventAfterRender: (event, element) ->
element.find('.fc-title').after("<span>"+event.description+"</span>")