Question

当用户单击时，我试图突出显示日历中的事件。我已经有一些基本的代码，但是它没有按我预期的那样工作。我的代码现在的工作方式只是突出显示一个星期，直到日历显示出来，直到事件结束。这是我的一些代码

document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');
  var lang = document.getElementsByTagName('html')[0].getAttribute('lang');
  if(lang == 'hy'){
    var language = hyLocale;
  }else if(lang == 'ru'){
    var language = ruLocale;
  }else{
    var language = 'en';
  }
  var calendar = new Calendar(calendarEl, {
    locales: [ ruLocale, hyLocale],
    locale: language,
    plugins: [dayGridPlugin],
    events: '/events/get',
    eventClick: function(info) {

      // This is where it resets the highlight when user clicks on another event
      $('.fc-event-container a').css('background-color', '#3788d8');


      // This is where i set the background color of the event when user clicks
      $(info.el).css('background-color', '#00da4a');
      $('#info-container').empty();

      var html = 'basic html for div';
      $('#info-container').append(html);
    }

  });

这是前端的外观。

即使在下个月，我也想突出显示整个活动。

Answer 1

我一直在做类似的事情。因此，我想为您分享我的想法。看看是否适合您。我所做的就是为代码中的每个事件分配一个ID，例如，事件1的ID为：no1，事件2的ID为：no2等。比起我使用eventRender来将事件的ID作为事件的类名称分配，因此它将其分配给扩展了事件的每个元素。代码如下：

eventRender: function(info) {
    info.el.className += " " + info.event.id + " ";
}

与eventClick相比，使用该类在运行时分配您的CSS，如下所示：

eventClick: function (info) {
    $('.'+info.event.id).css("background-color", "#00da4a");
}

请注意，它分配了CSS，但是要删除该CSS并应用于其他事件元素，我将把逻辑留给您：）

更新：

单击下一个或上一个事件，并且事件一直持续到下个月或上个月，您可能需要使用全局事件ID变量来存储选定的事件ID。然后，单击下一个和上一个按钮时，您可以使用所选的事件ID更改该事件的颜色。

例如：

var gEventId = 0;
document.addEventListener("DOMContentLoaded", function () {
   // First Call the Calendar Render code here...
   $('.fc-next-button, .fc-prev-button').click(function(){
      if (gEventId > 0)
      {
         $('.'+ gEventId).css("background-color", "#00da4a");
      }
   });
});

将gEventId保存在eventClick中，如下所示：

eventClick: function (info) {
   gEventId = info.event.id;
   $('.'+ info.event.id).css("background-color", "#00da4a");
}

要将所选事件ID还原为0，可以再次单击该事件或提供其他手段以取消选择该事件。逻辑很简单，您需要检查单击的事件ID是否与已选择的事件ID（存储在gEventId中的值）相同，然后将gEventId设置为0并取消选择突出显示的背景，否则突出显示背景色并将gEventId设置为事件ID。 / p>

如何在FullCalendar中的事件单击上突出显示整个事件

1 个答案: