ASP.NET MVC Core中fullcalendar.io如何添加带叉号的事件删除选项

1. 补充事件对象的自定义字段 #

你原来拉取后端数据组装日历事件的时候，要把删除需要的加密ID单独存到事件对象里，方便后续渲染和删除操作调用。修改$.each遍历mems的代码段：

$.each(mems, function (_, member) {
    events.push({
        title: member.guestname,
        start: new Date(member.checkindatetime),
        end: new Date(member.checkoutdatetime),
        allDay: true,
        url: '/Booking/Booking/' + member.encryptedId,
        className: member.classnamecolor,
        // 新增：存储删除操作需要的ID
        encryptedId: member.encryptedId
    });
});

2. 利用fullcalendar的渲染钩子注入删除叉号 #

在fullcalendar初始化配置里加eventRender回调，每个日历事件渲染完成时自动往DOM里插入叉号按钮，同时把事件ID绑定到按钮的data属性上：

$this.$calendarObj = $this.$calendar.fullCalendar({
    defaultView: 'month',  
    handleWindowResize: true,
    header: {
        left: 'prev,next today',
        center: 'title',
        right: ''
    },
    navLinks: false,
    events: events,
    // 新增事件渲染回调
    eventRender: function(event, element) {
        // 插入删除叉号，绑定事件ID
        element.append('<a href="javascript:;" class="fc-delete-event" data-id="'+event.encryptedId+'" title="删除预订" style="float:right;color:#fff;font-weight:bold;margin:0 3px;font-size:16px;line-height:1;cursor:pointer;opacity:0.9;">×</a>');
    }
});

如果要调整叉号样式，可以把内联样式抽到全局CSS里，加个hover效果体验更好：

.fc-delete-event:hover {
    opacity: 1 !important;
    transform: scale(1.15);
}

3. 绑定删除按钮的点击逻辑 #

因为删除按钮是动态渲染的，要用事件委托绑定点击事件，注意阻止事件冒泡，避免点叉号的时候触发原事件的跳转逻辑。在日历初始化完成后追加以下代码：

// 委托绑定删除事件
$this.$body.on('click', '.fc-delete-event', function(e) {
    // 阻止冒泡和默认行为，防止触发事件跳转
    e.stopPropagation();
    e.preventDefault();

    var deleteId = $(this).data('id');
    if(!confirm('确定要删除这条预订记录吗？')) return;

    // 请求后端删除接口
    $.post('/Booking/DeleteBooking', { id: deleteId }, function(res) {
        if(res.success) {
            // 删除成功后直接移除日历上的对应事件，不用整页刷新
            $this.$calendarObj.fullCalendar('removeEvents', function(ev) {
                return ev.encryptedId === deleteId;
            });
        } else {
            alert(res.msg || '删除失败，请重试');
        }
    }).fail(function() {
        alert('网络异常，请稍后重试');
    });
});

4. 补充后端删除接口 #

在你的BookingController里新增POST类型的删除接口，处理数据库删除逻辑，返回标准JSON结果：

[HttpPost]
public IActionResult DeleteBooking(string id)
{
    try
    {
        // 替换成你自己的业务逻辑：根据加密ID查询预订记录，执行删除
        // var booking = await _dbContext.Bookings.FirstOrDefaultAsync(b => b.EncryptedId == id);
        // if (booking == null) return Json(new { success = false, msg = "预订记录不存在" });
        // _dbContext.Bookings.Remove(booking);
        // await _dbContext.SaveChangesAsync();
        return Json(new { success = true });
    }
    catch (Exception ex)
    {
        return Json(new { success = false, msg = ex.Message });
    }
}

这样改完之后，所有日历事件右上角都会出现白色叉号，点击确认后就会调用接口删除对应记录，同时同步更新日历视图，不需要刷新页面。

内容的提问来源于stack exchange，提问作者hameed