Javascript 如何在FullCalendar中单击事件时突出显示整个事件

当用户单击时，我试图突出显示日历上的事件。我已经有了一些基本的代码，但它没有像我期望的那样工作。我的代码现在的工作方式只是突出显示一周，直到活动结束，如日历所示。这是我的一些代码

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);
    }

  });

这是前端的外观

---

即使在下个月，我也要强调整个事件。

我一直在做类似的事情。所以，我想和大家分享我的想法。 看看它是否适合你。 我所做的是在代码中为每个事件分配一个id，比如， 事件1的Id为：no1，事件2的Id为：no2等。 然后我将事件id作为类名分配给事件，因此它会将其分配给事件拉伸的每个元素。 守则如下：

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

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

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

在eventClick中，使用该类在运行时分配css，如下所示：

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

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

eventClick: function (info) {
   gEventId = info.event.id;
   $('.'+ 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中，如下所示：

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

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

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

---

要将所选事件id回滚到0，您可以再次单击该事件，或提供其他方法取消选择该事件。逻辑很简单，您需要检查单击的事件id是否与已选择的事件id（存储在gEventId中的值）相同，然后将gEventId设置为0并取消选择高亮显示的背景，否则高亮显示背景颜色并将gEventId设置为事件id。

我想您可能发现了一个小错误。我可以在这里复制您的问题：。如果您愿意，您可以使用该代码笔作为创建的基础。在这种情况下（以及其他情况，例如在timeGrid视图中），事件有时可能由多个HTML元素表示。回调中的

info.el

只允许您访问实际单击的内容。理想情况下，它应该允许您访问表示单个事件的所有元素的集合。@ADyson我知道这一点。我只是在寻找解决方案，谢谢。我的意思是，没有解决方案。如果查看呈现的HTML，则无法确定哪些元素构成同一事件的一部分。它需要在完整的日历内修复。因此，我建议做一个bug报告。@ADyson我甚至在考虑获取跨度的文本，然后突出显示具有相同文本的其他行。很“不太专业”，但嘿，我能做什么呢？这是一个预兆，你可能会侥幸逃脱。但是如果你因为某种原因有两个相同标题的活动，它就会掉下来。谢谢你的回答，但是一旦你改变了标题，它就不会保持颜色了month@Areg，我更新了这个逻辑的答案。如果解决方案对您有效，请标记并接受答案，谢谢：）奇怪。就像我可以看到，当你现在点击一个月的时候，背景颜色会发生变化，但只有一微秒。之后会重置为蓝色。现在，每当我点击下个月，它就会闪烁绿色，然后重新设置为blue@Areg，请在主要问题的末尾分享最新代码。写更新，然后在下面只写更新后的完整日历代码。@Areg，这是我试过的代码笔，它似乎按预期工作：