J'ai un fullcalendar dans mon fiddle here qui affiche les événements sous la forme d'un nombre dans chaque cellule de jours. Est-il possible, lors du déclenchement du clic de jour ou de l'élément de l'événement, de remplacer le numéro par un spinner. Puis quand je finis de tirer les données de l'événement et l'affichage, etc, etc, je mets le numéro en arrière et cache le fileur? Mise à jourInjecter un spinner dans une cellule de table fullcalendar
! - Je peux changer la valeur de l'élément de l'événement cellulaire à un spinner lorsque je clique sur l'élément à l'intérieur de la cellule comme celui-ci
eventLimitClick: function (cellInfo, jsEvent) {
var eventValue = $(cellInfo.moreEl).html();
$(cellInfo.moreEl).html('<i class="fa fa-circle-o-notch fa-spin fa-fw"></i>');
},
Mise à jour! - Je suis arrivé le jour cliquez pour afficher une fileuse
dayClick: function (date, jsEvent, view) {
var elementValue = $(jsEvent.target).text();
$(jsEvent.target).html('<div><a class="fc-more"><i class="fa fa-circle-o-notch fa-spin fa-fw"></i></a></div>');
mais je vais avoir plus de mal à changer quand je déclenche un clic jour. 'this' dans le callback, qui est un élément 'td', est pour une table différente de celle utilisée pour la valeur de l'élément d'événement. Si je peux juste comprendre comment changer l'élément en tenant la valeur d'un cliquet de jour je serai bon d'y aller! Ou si je peux déclencher un eventLimitClick d'un jour, cliquez sur J'accepterai !! Est-ce possible?
Voici un code ci-dessous
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: ''
},
//defaultDate: '2014-06-12',
defaultView: 'basicWeek',
editable: false,
height: 174,
eventLimit: 1,
eventLimitText: function(numEvents) {
return numEvents;
},
eventLimitClick: function (cellInfo, jsEvent) {
},
dayClick: function(date, jsEvent, view) {
},
events: [{
title: 'Event',
start: '2017-09-28'
},
{
title: 'Event',
start: '2017-09-28'
}
]
});
});td.fc-more-cell {
text-align: center;
font-size: 2.3em;
}
.fc-row .fc-content-skeleton,
.fc-row .fc-content-skeleton td,
.fc-row .fc-content-skeleton table,
.fc-row .fc-content-skeleton tr {
height: 100%;
vertical-align: middle;
}
.fc-row .fc-content-skeleton td div {
display: inline-block;
line-height: 100%;
}<div id='calendar'></div>