fullcalendar，删除按钮点击事件

Question

i am trying delete events when i click in button "x", but not work, and not getting any error.

I assign the function click in parameter "eventRender".

This is my code with JavaScript:

$('#calendar').fullCalendar({
        locale: 'es',
        weekends: false, //ocultar fines de semana
        defaultView: 'agendaWeek',
        allDaySlot: false,
        header: {
            left: 'month,agendaWeek,agendaDay,listDay',
            center: 'title',
            right: 'prev,next today'
        },
        height: 'auto',
        minTime: "10:00:00",
        maxTime: "20:00:00",
        editable: true,
        //droppable: true, // this allows things to be dropped onto the calendar
        dayClick: function(date, jsEvent, view) {
            console.log('Clicked on: ' + date.format());
            console.log('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
            console.log('Current view: ' + view.name);
            var hoy = moment();
            if(date.format("YYYY-MM-DD HH:mm") >= hoy.format("YYYY-MM-DD HH:mm")){
                asignarCita(date);
            }else{
                swal({
                    title: "Cita no disponible",
                    text: "La fecha u hora seleccionada ya ha pasado."
                });
            }
        },
        eventRender: function(event, element) {
            element.prepend( "<div class='ibox-tools'><a style='background-color: transparent; margin-right: 10px' class='pull-left'><i class='fa fa-times closeon'></i></a></div>" );
            //element.append( "<span class='closeon'>X</span>" );
            console.log(element.find('closeon'));
            element.find(".closeon").click(function() {
                $('#calendar').fullCalendar('removeEvents',event._id);
            });
        },
        events: [
            {
                title: 'All Day Event',
                start: '2014-10-01'
            },
            {
                title: 'Long Event',
                start: '2014-10-07',
                end: '2014-10-10'
            },
            {
                id: 999,
                title: 'Repeating Event',
                start: '2014-10-09T16:00:00'
            },
        ],
    });

Where is the problem?

Answer 1

Try this:

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);
            console.log('delete');
            });
    },

https://jsfiddle.net/vc9ytv2k/

Answer 2

The current version of FullCalendar has different API

eventRender: function(info) {
      $(info.el).append("<span class='removebtn'>X</span>");
      $(info.el).find(".removebtn").click(function() {
        info.event.remove();
      });
    }