Je cherche une solution pour afficher plus d'informations dans un événement.
Par exemple, dans la vue du jour, vous voyez un événement de 06:00 à 10:00.
Je veux afficher une description supplémentaire dans cet événement (pas seulement l'heure et le titre).
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);
}
});
}
En plus de cela, au lieu de append vous pourriez utiliser after si vous voulez créer un nouvel élément en dehors de <span class="fc-event-title"></span> . J'ai également ajouté une déclaration conditionnelle afin de ne pas avoir d'erreur. Indéfini sorties : if (event.description) { element.find('.fc-event-title').after("<span class=\"myClass\">" + event.description + "</span>"); }
Personnellement, j'utilise une infobulle pour afficher des informations supplémentaires. Ainsi, lorsque quelqu'un survole l'événement, il peut voir une description plus longue. Cet exemple utilise qTip mais n'importe quelle implémentation d'infobulle peut fonctionner.
$(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'
}
}
});
}
});
});
Bonjour, je voudrais savoir une chose, dans le calendrier complet, pouvons-nous afficher un titre tel que screencast.com/t/iOSPV822VD8Y ce genre de choses, on peut le faire.
En modifiant une seule ligne, vous pourriez modifier le script script pour permettre un saut de ligne et mettre plusieurs informations sur la même ligne.
Dans FullCalendar.js à la ligne ~3922 trouver la fonction htmlEscape(s) et ajouter .replace(/<br \s ?/?>/g, '
) à la fin de celui-ci.
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, en séparant les informations. Exemple : remplacez event.title par title : "Événement d'une journée" + "<br />" + "Autre description".
La réponse de @Eureka est beaucoup plus générale que celle-ci et ne vous causera pas d'ennuis si vous essayez de maintenir vos modifications de fullcalendar.js en synchronisation avec les nouvelles fonctionnalités et les corrections de bogues publiées après votre changement.
Je suis d'accord pour dire que je ne préfère pas modifier les sources, mais parfois c'est une solution plus propre et fullcalendar n'est pas exactement un projet qui évolue rapidement.
Voici mon code pour la popup 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);
},
});
}());
});
J'ai trouvé une solution plus simple pour moi :
J'ai changé fullcalendar.css
et 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 lorsqu'il le faut.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
