Fullcalendar v5 如何使用菜单导航 nav-tabs 显示和隐藏事件

Question

我想用 bootstrap nav nav-tabs 这样的菜单显示和隐藏事件。

在选项卡上，我单击 Event1 仅显示带有“cid：“1”的事件”，Event2 仅显示带有“cid：”2“的事件，ALL 显示所有事件。

谁能帮我开发这个？基于这个问题我做了一个基于复选框的codepen，只是为了开始...... https://codepen.io/berettatim/pen/rNeXwLm

html:

<div class="row">
  <div class="col-md-12">
    <ul class="nav nav-tabs">
    <li onclick="javascript:CalendarTypeSet(1)" class="nav-item"><a class="nav-link active" data-toggle="tab" href="#CalTab1" style="font-size:16px;"><b>EVENT1</b></a></li>
    <li onclick="javascript:CalendarTypeSet(2)" class="nav-item"><a class="nav-link" data-toggle="tab" href="#CalTab2" style="font-size:16px;"><b>EVENT2</b></a></li>
    <li onclick="javascript:CalendarTypeSet(3)" class="nav-item"><a class="nav-link" data-toggle="tab" href="#CalTab3" style="font-size:16px;"><b>EVENT3</b></a></li>
    <li onclick="javascript:CalendarTypeSet('all')" class="nav-item"><a class="nav-link" data-toggle="tab" href="#CalTabAll" style="font-size:16px;"><b>ALL</b></a></li>
</ul>
  </div>
  <div class="col-md-12">
    <input class="cs" value="1" type="checkbox" checked>Calendar1<br>
    <input class="cs" value="2" type="checkbox" checked>Calendar2
    <div id='calendar'></div>
  </div>

脚本：

document.addEventListener("DOMContentLoaded", function () {
  var calendarEl = document.getElementById("calendar");
  var calendar = new FullCalendar.Calendar(calendarEl, {
    now: "2020-07-11",
    scrollTime: "00:00",
    aspectRatio: 1.8,
    headerToolbar: {
      left: "today prev,next",
      center: "title",
      right: "dayGridMonth,timeGridWeek,timeGridDay,listMonth"
    },
    initialView: "dayGridMonth",
    events: function (fetchInfo, successCallback, failureCallback) {
      successCallback([
        {
          id: "1",
          title: "event1",
          start: "2020-07-01 19:30",
          end: "2020-07-02 19:30",
          backgroundColor: "#39CCCC",
          cid: "1"
        },
        {
          id: "2",
          title: "event2",
          start: "2020-07-09 19:30",
          end: "2020-07-10 19:30",
          backgroundColor: "#F012BE",
          cid: "2"
        }
      ]);
    },
    eventDidMount: function (arg) {
      var cs = document.querySelectorAll(".cs");
      cs.forEach(function (v) {
        if (v.checked) {
          if (arg.event.extendedProps.cid === v.value) {
            arg.el.style.display = "block";
          }
        } else {
          if (arg.event.extendedProps.cid === v.value) {
            arg.el.style.display = "none";
          }
        }
      });
    }
  });
  calendar.render();

  var csx = document.querySelectorAll(".cs");
  csx.forEach(function (el) {
    el.addEventListener("change", function () {
      calendar.refetchEvents();
      console.log(el);
    });
  });
});

//Not sure for this...
    function CalendarTypeSet(fTip)
    {
         var x = document.getElementById('cal_tip');
         x.value=fTip;
         //$('#calendar').fullCalendar('rerenderEvents');
    calendar.rerenderEvents('#calendar');
    }

Answer 1

你需要的改变更多的是关于tabs的使用，而不是fullCalendar 3和5的区别。和checkboxes相比，一次只能选择一个选项，所以你需要从tabs本身找出来当前打开哪个选项卡。

所以这是一个可行的简单想法：显示选项卡时，运行一个函数。在那个函数中，调用日历的 refetchEvents() 方法 (https://fullcalendar.io/docs/Calendar-refetchEvents). Then you can use the calendar's eventDataTransform callback to decide whether that event should be displayed on the calendar or not, based on which tab is currently "active". See (https://fullcalendar.io/docs/eventDataTransform) - 这比 eventDidMount 更可取，因为它运行s 在事件呈现到日历上之前，而不是之后.

应该这样做：

HTML:

<div class="row">
  <div class="col-md-12">
    <ul class="nav nav-tabs">
      <li data-tabid="1" class="nav-item"><a class="nav-link active" data-toggle="tab" href="#CalTab1" style="font-size:16px;"><b>EVENT1</b></a></li>
      <li data-tabid="2" class="nav-item"><a class="nav-link" data-toggle="tab" href="#CalTab2" style="font-size:16px;"><b>EVENT2</b></a></li>
      <li data-tabid="3" class="nav-item"><a class="nav-link" data-toggle="tab" href="#CalTab3" style="font-size:16px;"><b>EVENT3</b></a></li>
      <li data-tabid="all" class="nav-item"><a class="nav-link" data-toggle="tab" href="#CalTabAll" style="font-size:16px;"><b>ALL</b></a></li>
    </ul>
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <div id="calendar"></div>
  </div>
</div>

JavaScript:

document.addEventListener("DOMContentLoaded", function () {
  var calendarEl = document.getElementById("calendar");
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialDate: "2020-07-01",
    aspectRatio: 1.8,
    headerToolbar: {
      left: "today prev,next",
      center: "title",
      right: "dayGridMonth,timeGridWeek,timeGridDay,listMonth"
    },
    initialView: "dayGridMonth",
    events: function (fetchInfo, successCallback, failureCallback) {
      successCallback([
        {
          id: "1",
          title: "event1",
          start: "2020-07-01 19:30",
          end: "2020-07-02 19:30",
          backgroundColor: "#39CCCC",
          cid: "1"
        },
        {
          id: "2",
          title: "event2",
          start: "2020-07-09 19:30",
          end: "2020-07-10 19:30",
          backgroundColor: "#F012BE",
          cid: "2"
        }
      ]);
    },
    eventDataTransform: function (eventData) {
      var selectedTab = document.querySelector(".nav-tabs li a.active").dataset.tabid;
          if (selectedTab == "all" || eventData.cid == selectedTab) {
            return eventData;
          }
          else return false; //discard the event
    }
  });
  calendar.render();

  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      calendar.refetchEvents();
  });
});

演示：https://codepen.io/ADyson82/pen/abZZEbM

Fullcalendar v5 如何使用菜单导航 nav-tabs 显示和隐藏事件

Fullcalendar v5 how to show and hide events with menu nav nav-tabs

javascript

html

twitter-bootstrap

fullcalendar

fullcalendar-5