How to highlight the entire event on Event Click in FullCalendar

Question

I am trying to highlight an event on my calendar when user clicks. I already have some basic code, but it's not working as i expected. The way my code works now it's just highlighting for a week and not until the end of the event as it is shown in the calendar. Here's some of my code

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

  });

And here's what it looks like on the front end.

I want to highlight the entire event even on the next month.

Answer 1

I have been doing something similar. So, I would like to share my idea for you. See if it works for you. What I did is to assign an id to each event at my code, like, Id for Event 1 is: no1, for Event 2 is: no2 etc. Than I used eventRender to assign the id of event as a class name to the event, so it will assign that to each element where the event is stretched. The code would be as follow:

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

Than in eventClick, use that class to assign your css at run time, as follow:

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

Note that it assigned css but to remove that css and to apply to other event element, I will leave that logic upto you:)

UPDATE:

When next or previous clicked, and event is stretching till next or previous month, you may need to use global event id variable to store selected event id. And on next and previous button click, you may use that selected event id to change color of that event.

For example:

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

The gEventId is saved in eventClick as follow:

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

To roll back selected event id to 0, you may click that event again or provide some other mean to unselect the event. The logic is simple, you need to check if clicked event id is same as already selected event id (value stored in gEventId), than set gEventId to 0 and unselect the highlighted background else highlight the background color and set gEventId to event id.