AngularJS中如何点击按钮移除FullCalendar的所有事件？

嘿，别担心！你的需求完全可以实现，作为AngularJS新手，咱们一步步来搞定这个重置日历事件的问题～

核心思路 #

ui-calendar是基于FullCalendar封装的Angular指令，我们可以结合FullCalendar原生API或者Angular数据绑定两种方式来实现移除所有事件的功能。

方式一：使用FullCalendar原生API（推荐） #

这个方法最直接，直接调用FullCalendar的removeEvents方法就能清空所有显示的事件，同时同步本地数据：

修改你的JS代码中removeallevents函数：

$scope.removeallevents = function() {
    // 先判断日历实例是否已初始化（避免报错）
    if ($scope.myCalendar) {
        // 调用FullCalendar原生方法移除所有事件
        $scope.myCalendar.fullCalendar('removeEvents');
        // 清空本地的events数组，保持数据与视图同步
        $scope.events.splice(0);
    }
};

为什么这样做？

• $scope.myCalendar是你通过calendar="myCalendar"绑定的日历实例，能直接调用FullCalendar的所有原生方法。
• removeEvents()不带参数时，会移除日历上的所有事件。
• $scope.events.splice(0)会清空本地存储的静态事件数组，确保下次操作时数据是干净的。

方式二：通过Angular数据绑定重置数据源 #

如果你更倾向于用Angular的方式操作数据，也可以直接修改eventSources和$scope.events来实现：

$scope.removeallevents = function() {
    // 清空静态事件数组
    $scope.events.splice(0);
    // 重置eventSources，只保留空的静态数组（如果不需要动态加载的话）
    $scope.eventSources = [$scope.events];
    // 手动触发Angular的脏检查，确保视图更新
    $scope.$apply();
};

补充：如果之后需要重新加载事件

如果重置后还想重新从数据库获取最新事件，可以在函数末尾添加重新加载的逻辑：

// 重新获取事件数据
$scope.myevents(
    $scope.myCalendar.fullCalendar('getView').start,
    $scope.myCalendar.fullCalendar('getView').end,
    null,
    function() {}
);

注意事项 #

• 确保日历实例已初始化：因为日历是异步加载的，首次点击按钮时可能$scope.myCalendar还未赋值，加个if判断能避免控制台报错。
• 数据同步：无论用哪种方式，记得同步本地的$scope.events数组，避免数据和视图不一致。

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