全日历上的多事件选择

Question

刚开始使用完整的日历，它很棒。 确实很容易遵循文档并对此感到非常满意。 通过json显示了一个不错的时间轴视图。

我一直在谷歌搜索一段时间，这是一种能够单击日历中的事件并将其放入购物篮的方法。

这样，您可以单击日历中的许多事件，然后同时对它们执行操作。 我有一个真正可以从此功能中受益的项目。

有人知道这是否已经存在，或者有人如何做到这一点吗？ 也许是通过控制单击事件或仅单击每个事件并将其添加到最近单击的事件列表中？

谢谢

Answer 1

我以为我会针对这个问题发布解决方案。 感谢@ADyson为我指出正确的方向。

因此，首先，您需要在页面上进行切换，如果将其设置为on，则会更改完整日历onclick的默认行为。

<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，这是一个自定义字段，允许我为每个新事件赋予自己的唯一ID。

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

我希望这对其他人很方便。