Question

我可以像这样更改事件颜色：

     /* config object */
    $scope.uiConfig = {
      calendar:{
        height: 650,
        editable: true,
        header:{
          left: 'title',
          center: '',
          right: 'today prev,next'
        },
        eventClick: $scope.alertOnEventClick,
        eventDrop: $scope.alertOnDrop,
        eventResize: $scope.alertOnResize,
        eventRender: $scope.eventRender,
        monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Aout', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
        dayNamesShort: ["Dim", "Lun", "Mar", "Merc", "Jeud", "Vend", "Same"],
        dayClick: $scope.newrendezVous

      }
    };

$scope.alertOnEventClick = function( item, jsEvent, view){
       $(this).css('background-color', 'grey');
 }

但是当我点击另一个事件时，第一个事件保持灰色并且没有得到他的初始颜色......我怎么能请你，谢谢你

Answer 1

尝试使用.addClass() / .removeClass()使用css类（因此可以将其用作选择器），而不是使用.css()手动操作：

＆＃13;

$scope.alertOnEventClick = function(item, jsEvent, view) {
  $(".full-calendar-highlight").removeClass("full-calendar-highlight");
  $(jsEvent.target).addClass("full-calendar-highlight");
};

＆＃13;

.full-calendar-highlight {
  background-color: gray;
}

＆＃13;

Answer 2

document.querySelectorAll(".fc-content-skeleton .fc-event.fc-highlight").forEach((nodeElement: HTMLElement) => {
   nodeElement.classList.remove("fc-highlight");
});
    
jsEvent.path.forEach((nodeElement: HTMLElement) => {
   if (nodeElement.classList && nodeElement.classList.contains("fc-event")) {
      nodeElement.classList.add("fc-highlight");
   }
});

如何在角度ui日历中更改eventClick颜色？

2 个答案: