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

Question

我想用像 bootstrap nav nav-tabs 这样的菜单来显示和隐藏事件。在选项卡上，我单击 Event1 仅显示带有&ldquo;cid：&ldquo;1&rdquo;的事件&rdquo;，Event2 仅显示带有&ldquo;cid：&rdquo;2&ldquo;的事件，ALL 显示所有事件。谁能帮我开发这个？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"        },

Answer 1

您需要的更改更多地与选项卡的使用有关，而不是与 fullCalendar 3 和 5 之间的区别有关。与复选框相比，一次只能选择一个选项，因此您需要从选项卡本身找出当前打开的选项卡.

所以这是一个可行的简单想法：显示选项卡时，运行一个函数。在该函数中，调用日历的refetchEvents()方法 。然后您可以使用日历的eventDataTransform回调来决定该事件是否应该显示在日历上，基于哪个选项卡当前是“活动的”。这是更可取的，eventDidMount因为它在事件呈现到日历上之前运行，而不是之后运行。

像这样的事情应该这样做：

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>

脚本：

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

  });

});