web-dev-qa-db-fra.com

fullcalendar.js - Suppression d'un événement après un clic sur un bouton

J'utilise fullCalendar.js et le problème actuel me fait perdre tellement de temps sur quelque chose qui pourrait être simple, pour qui comprendre le javascript (jquery plus spécifique) mieux que moi.

Le lien de mon exemple est en bas mais ma préoccupation principale est cette partie: 

eventClick: function(event){
  $(".closon").click(function() {
     $('#calendar').fullCalendar('removeEvents',event._id);
  });
},

Je souhaite supprimer un événement du calendrier avec mon bouton de fermeture et non par un clic direct sur l'événement. J'ai déjà essayé d'utiliser le $element.click en dehors du déclencheur eventClick, mais il a fermé tous les événements du calendrier et le maximum que je pouvais atteindre était cette mauvaise situation, où l'utilisateur doit cliquer d'abord sur l'événement du calendrier et ensuite sur le «X» pour supprime-le.

http://jsfiddle.net/59RCB/49/

javascriptjqueryjsonfullcalendar
14
guilima

Supprimez la fonction eventClick et remplacez la fonction eventAfterAllRender par ceci:

        eventRender: function(event, element) {
            element.append( "<span class='closeon'>X</span>" );
            element.find(".closeon").click(function() {
               $('#calendar').fullCalendar('removeEvents',event._id);
            });
        }
37
CodeGodie

La solution ci-dessus fonctionne parfaitement avec la vue mensuelle, mais si vous êtes sur la vue de la semaine et de la journée, cette solution ne fonctionnera pas comme indiqué par nextdoordoc ci-dessus ..__ Pourquoi? Dans Weekview, leur élément est div avec ".fc-bg" en tant que classe CSS qui est superposée avec une opacité de 25% qui bloque les événements liés aux clics.

Contournement:

eventRender: function(event, element) { 
       element.find(".fc-bg").css("pointer-events","none");
       element.append("<div style='position:absolute;bottom:0px;right:0px' ><button type='button' id='btnDeleteEvent' class='btn btn-block btn-primary btn-flat'>X</button></div>" );
       element.find("#btnDeleteEvent").click(function(){
            $('#calendar').fullCalendar('removeEvents',event._id);
       });

L'ajout de pointer-events:none permet la propagation d'un événement de clic ..__ Remarque: cette solution ne fonctionne pas dans IE10 et versions antérieures.

Pour travailler dans IE10, vous pouvez directement ajouter votre bouton de suppression à (".fc-bg")

voici l'exemple:

eventRender: function(event, element) { 
   element.find(".fc-bg").append("<div style='position:absolute;bottom:0px;right:0px' ><button type='button' id='btnDeleteEvent' class='btn btn-block btn-primary btn-flat'>X</button></div>" );}

J'espère aider quelqu'un

10
Sandy

cela fonctionnera pour les vues Mois, Semaine, Jour

eventRender: function (event, element, view) {

            if (view.name == 'listDay') {
                element.find(".fc-list-item-time").append("<span class='closeon'>X</span>");
            } else {
                element.find(".fc-content").prepend("<span class='closeon'>X</span>");
            }
            element.find(".closeon").on('click', function () {
                $('#calendar').fullCalendar('removeEvents', event._id);
            });
1
Ragupathy

La façon dont j'ai trouvé:

//HTML Code to add the button

<div id='calendar'></div>
<button id='Delete'>Delete Events</button></p>

-

//Our Js data
{id: '1', resourceId: 'a' , start: '2015-10-16T10:52:07', end: '2015-10-16T21:00:00', url: 'https//www.google.com', title: 'How to delete Events'},
{id: '2', resourceId: 'b' , start: '2015-10-16T11:00:10', end: '2015-10-18T17:03:00', title : 'Can we delete multiple events ?'},
{id: '2', resourceId: 'c' , start: '2015-10-16T10:00:00', end: '2015-10-16T23:00:02', title : 'How ?'},
],

//Need to set our button
select: function(start, end, jsEvent, view, resource) {
        console.log(
        'select callback',
        start.format(),
        end.format(),
        resource ? resource.id : '(no resource)'
        );
        }
        });

        //Our button to delete Events
        $('#Delete').on('click', function() {
        $('#calendar').fullCalendar('removeEvents', 2); //Remove events with the id: 2
            });

 });
1
Nearyuk

Ce code peut mieux vous aider. Dans ce code, l'icône de suppression vous affiche chaque fois que votre souris se déplace au-dessus d'un événement et chaque fois que votre souris sort de l'extérieur, le bouton Supprimer sera masqué ou supprimé.

eventMouseover:function(event,domEvent,view){

    var el=$(this);

    var layer='<div id="events-layer" class="fc-transparent"><span id="delbut'+event.id+'" class="btn btn-default trash btn-xs">Trash</span></div>';
    el.append(layer);

    el.find(".fc-bg").css("pointer-events","none");

    $("#delbut"+event.id).click(function(){
        calendar.fullCalendar('removeEvents', event._id);
    });
},
eventMouseout:function(event){
    $("#events-layer").remove();
}
1
SohanLal Saini