Выбор нескольких событий в полном календаре - PullRequest
Новая
       21

Выбор нескольких событий в полном календаре

0 голосов
/ 10 июля 2019

Только начал использовать полный календарь и это здорово.Действительно легко следовать документации и очень доволен ею.У меня хороший вид шкалы времени, отображаемый через json.

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

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

Кто-нибудь знает, существует ли он уже или кто-то каким-то образом достиг этого?Может быть, щелкнув по событиям или просто щелкнув по каждому из них и добавив его в список недавно нажатых событий?

Спасибо

1 Ответ

0 голосов
/ 11 июля 2019

Я думал, что выложу свое решение этой проблемы. Спасибо @ADyson за указание в правильном направлении.

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

<label>
 <input type="checkbox" name="bulkSelect" id="bulkSelect" data-toggle="toggle">
            Bulk Select
</label>

Далее, перед полным вызовом календаря добавьте следующие строки кода в теги сценария. Пустой массив и две функции. Один для добавления в массив и один для удаления из массива. 

var myEvents = [];

function addToEventArray(element)
{
  myEvents.push(element);
}

function removeAFromArray(arr)
{
  var what, a = arguments, L = a.length, ax;
  while (L > 1 && arr.length)
  {
      what = a[--L];
      while ((ax= arr.indexOf(what)) !== -1)
      {
          arr.splice(ax, 1);
      }
  }
  return arr;
}

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

Просто обратите внимание, что я использую extendedProps.eventID, которое является настраиваемым полем, позволяющим мне назначать каждому новому событию свой уникальный идентификатор. 

eventClick: function(info) {
    if($('#bulkSelect').prop('checked') == true)
    {
      if(jQuery.inArray(info.event.extendedProps.eventID, myEvents) != -1)
      {
          removeAFromArray(myEvents, info.event.extendedProps.eventID);
          info.el.style.borderColor = 'transparent';
      }
      else
      {
          addToEventArray(info.event.extendedProps.eventID);
          info.el.style.borderColor = 'red';
      }
    }
    else
    {
      console.log('clicked single event');
    }
  }

Надеюсь, это пригодится кому-то еще.

...