jquery FullCalendar：删除按钮点击事件

fdbelqdn 于 2023-11-17 发布在 jQuery

关注(0)|答案(3)|浏览(159)

我正在尝试从FullCalendar中删除动态选择的事件。

的数据
当呈现此事件时，它也将显示在表中，每行末尾都有一个删除按钮。

我想做的是当我点击删除按钮时，它也会删除日历上的事件。我可以从表中删除该行，但不能从日历中删除。
下面是我选择事件的代码

var eventID = 0;
$('.calendar').fullCalendar({
    select: function(start, end, event, view, resource) {
            if(start.isBefore(moment())) {
                $('.calendar').fullCalendar('unselect');
                swal('Ooops!','You cannot select past date/time!','error')
            }else{
                $('#reserved_date').val(moment(start).format("YYYY-MM-DD"))
                $('#end_time').val(moment(end).format("hh:mm A"));
                $('#start_time').val(moment(start).format("hh:mm A"));
                $('#newScheduleModal').modal({
                    show : true,
                    backdrop: 'static',
                    keyboard: false
                });
                eventData = {
                    id: eventID +1,
                    title: 'Lesson Schedule',
                    start: start,
                    end: end,
                };
            }
            $(".fc-highlight").css("background", "red");

    },
    events: obj,
    eventRender:function( ev, element ) { 
        eventID++; 
        $('#sched_data').append('<tr class="tb-row">'+
            '<td>'+moment(ev.start).format('MMM. DD, YYYY')+'</td>'+
            '<td>'+moment(ev.start).format('hh:mm A')+'</td>'+
            '<td>'+moment(ev.end).format('hh:mm A')+'</td>'+
            '<td><button class="btn btn-danger btn-del btn-xs" data-id"'+ev._id+'"><i class="fa fa-times"></i></button></td></tr>'
        )
    },

})

字符串
下面是将事件呈现到日历的代码

$('#btn-reserve').click(function(){
        $('.calendar').fullCalendar('renderEvent', eventData, true);

})

型
这是我删除事件的代码

$('body').on('click','.btn-del',function(){
    $(this).closest('.tb-row').remove();
    $('.calendar').fullCalendar('removeEvents', $(this).data('id'));
  })

型

jquery

来源：https://stackoverflow.com/questions/46128968/fullcalendar-remove-events-on-button-click

3条答案

按热度按时间

qltillow1#

如果你想用eventClick删除一个事件，你可以这样尝试：

document.addEventListener('DOMContentLoaded', function () {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, /*OPTIONS*/);

  calendar.on('eventClick', function (info) {
    calendar.getEventById(info.event.id).remove();
  });

});

字符串

赞(0）回复(0）举报 2023-11-17

pxy2qtax2#

我已经做了，
我的代码：

$('body').on('click','.btn-del',function(){
    $(this).closest('.tb-row').remove();
    $('.calendar').fullCalendar('removeEvents', $(this).data('id'));
})

字符串
它应该是什么

$('body').on('click','.btn-del',function(){
    var del_btn = $(this);
    del_btn.closest('.tb-row').remove();

    $(".calendar").fullCalendar('removeEvents', function(event) {
        return event.id == del_btn.data('id');
    });
})

型
第二个参数应该是一个函数，而不仅仅是简单的ID。

赞(0）回复(0）举报 2023-11-17

5w9g7ksd3#

Fullcalendar中的每个事件都有自己的ID，由Fullcalendar生成。
请将此添加到您的参数中：

eventClick: function(calEvent, jsEvent, view) {
    $('#calender').fullCalendar('removeEvents', calEvent._id);
},

字符串

赞(0）回复(0）举报 2023-11-17

我来回答

jquery FullCalendar：删除按钮点击事件

3条答案

相关问题

热门标签

最新问答