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

Question

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

在选项卡上，我单击 Event1 仅显示带有“cid：“1”的事件”，Event2 仅显示带有“cid：”2“的事件，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();  });});