我想用像 bootstrap nav nav-tabs 這樣的菜單來顯示和隱藏事件。在選項卡上，我單擊 Event1 僅顯示帶有“cid：“1”的事件”，Event2 僅顯示帶有“cid：”2“的事件，ALL 顯示所有事件。誰能幫我開發(fā)這個？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"? ? ? ? },
Fullcalendar v5 如何使用菜單導航 nav-tabs 顯示和隱藏事件
慕哥6287543
2023-05-25 16:12:55
