如何重置angular-bootstrap-calendar日历单元格已应用的CSS类？

我来帮你搞定这个问题！你现在遇到的核心问题是：每次点击新单元格时，之前被选中的单元格样式没有被清除，导致多个单元格都保留了freeze-cell类。其实只需要维护一个变量记录上一次选中的单元格，在每次点击新单元格时先重置它的样式，再设置当前单元格的样式就可以了。

具体步骤如下： #

1. 在作用域中添加变量记录上一次选中的单元格
   在你的控制器里初始化一个变量，用来存储上一次被点击的单元格引用：

   $scope.lastClickedCell = null;
   

2. 修改timespanClicked函数，添加样式重置逻辑
   更新你的点击事件处理函数，先清空上一次选中单元格的CSS类，再给当前单元格添加样式，最后更新记录的单元格：

   $scope.timespanClicked = function (date, cell) {
     // 重置上一次选中单元格的样式
     if ($scope.lastClickedCell) {
       $scope.lastClickedCell.cssClass = '';
     }
     // 给当前点击的单元格添加样式类
     cell.cssClass = 'freeze-cell';
     // 更新记录的上一次选中单元格
     $scope.lastClickedCell = cell;
   };
   

3. 确认CSS样式正确定义
   确保你的freeze-cell类已经正确设置了样式，比如：

   .freeze-cell {
     background-color: #e0f7fa; /* 这里可以替换成你想要的颜色 */
   }
   

这样修改后，每次点击新的单元格时，之前被选中的单元格样式就会被自动清除，只有当前点击的单元格会保留你设置的颜色啦。

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