突出显示事件以全日历方式单击,并在用户再次单击事件时删除突出显示

时间:2019-06-04 04:18:22

标签: angularjs event-handling fullcalendar

我正在将fullcalendar与angularjs一起使用,并且正在使用fullcalendar的eventClick来获取单击的事件值。我要实现的是,当用户单击事件时,应以不同的颜色突出显示所单击的事件,如果用户再次单击同一事件,则应删除突出显示。我该如何实现?请在下面找到代码

$scope.showCalendar = function()
     {$scope.clickClass = "";
        $scope.CalendarEl = document.getElementById('Calendar');
        $scope.classCalendar = new FullCalendar.Calendar($scope.CalendarEl, {
            header: {
                right:'prev,next,today',
                center:'title',
                left: ''
            },
            events: [],
            plugins: [ 'dayGrid','timeGrid','list' ],
            eventClick: function(info)
            {
                console.log("---$$$$----"+info.event.title);
                $scope.clickClass = info.event.title;

                $scope.addDisable = false;


            }
        });


     };

还请注意,日历中有超过一天的活动

已更新

我提出了一个解决方案,以突出显示如下所示的点击事件

$scope.showCalendar = function()
         {$scope.clickClass = "";
            $scope.CalendarEl = document.getElementById('Calendar');
            $scope.classCalendar = new FullCalendar.Calendar($scope.CalendarEl, {
                header: {
                    right:'prev,next,today',
                    center:'title',
                    left: ''
                },
                events: [],
                plugins: [ 'dayGrid','timeGrid','list' ],
                eventClick: function(info)
                {
                    console.log("---$$$$----"+info.event.title);
                    $scope.clickClass = info.event.title;

                    $scope.addDisable = false;

                    info.el.style.backgroundColor = 'red';
                }
            });


         };

但是当再次单击同一事件时,我不知道如何删除突出显示。预先感谢

0 个答案:

没有答案