Как выделить все событие на событии Click в FullCalendar - PullRequest
Новая
       14

Как выделить все событие на событии Click в FullCalendar

1 голос
/ 23 октября 2019

Я пытаюсь выделить событие в моем календаре, когда пользователь нажимает. У меня уже есть базовый код, но он не работает, как я ожидал. Как работает мой код, теперь он просто подсвечивается на неделю, а не до конца события, как показано в календаре. Вот часть моего кода 

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

  });

А вот как это выглядит на передней панели.

enter image description here

Я хочу выделитьвсе событие даже в следующем месяце.

1 Ответ

1 голос
/ 29 октября 2019

Я делал что-то подобное. Итак, я хотел бы поделиться своей идеей для вас. Посмотрите, работает ли это для вас. Что я сделал, так это назначил идентификатор каждому событию в моем коде, например, идентификатор для события 1: no1, для события 2: no2 и т. Д. Чем я использовал eventRender , чтобы назначить идентификатор события какимя класса для события, поэтому оно присваивает его каждому элементу, где растягивается событие. Код будет выглядеть следующим образом: 

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

Чем в eventClick использовать этот класс для назначения CSS во время выполнения, как показано ниже: 

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

Обратите внимание, что он назначил CSS, ноудалить эту CSS и применить к другому элементу события, я оставлю эту логику на ваше усмотрение:)

ОБНОВЛЕНИЕ:

Когда следующий или предыдущий нажал, и событие растягиваетсядо следующего или предыдущего месяца вам может понадобиться использовать глобальную переменную идентификатора события для хранения выбранного идентификатора события. И при следующем и предыдущем нажатии кнопки вы можете использовать этот выбранный идентификатор события для изменения цвета этого события.

Например: 

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

Чтобы откатить выбранный идентификатор события до 0, вы можете снова щелкнуть это событие или указать другое средство, чтобы отменить выбор события. Логика проста: вам нужно проверить, совпадает ли идентификатор события, по которому щелкнули, с уже выбранным идентификатором события (значение хранится в gEventId), затем установить для gEventId значение 0 и отменить выбор выделенного фона, в противном случае выделите цвет фона и установите для gEventId идентификатор события.

...