Question

刚刚开始使用完整的日历及其功能。确实很容易遵循文档并对此感到非常满意。通过json显示了一个漂亮的时间轴视图。

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

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

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

谢谢

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

我希望这对外面的人派上用场。

全日历上的多事件选择

1 个答案: