在FullCalendar中使用日期导航后显示相关事件

Question

我正在使用 FullCalendar，我需要在单击上一个和下一个按钮时，如果单击“周”视图，它应该显示该特定周的事件。

此外，如果您使用周导航图标向前或向后导航，它应该显示相应周的事件。我正在使用 JS。

 function nextbutton() {
    console.log("test");
}
$(document).ready(function () {
    $(".fc-next-button").click(nextbutton);
});

 function prevbutton() {
    console.log("test");
}
$(document).ready(function () {
    $(".fc-prev-button").click(prevbutton);
});

这是我的代码，我不知道接下来会发生什么。如果有人能解释一下，这对我很有帮助

我想要一个解释。谢谢你

Answer 1

首先，您不需要专门处理下一个/上一个按钮上的点击事件。

您可以设置一个可以按需获取数据的事件源 - 请参阅事件源文档）了解配置该事件的可能选项。

这样，每当您单击上一个/下一个（或通过任何其他方式更改日期范围，例如更改视图类型、单击日期导航链接或使用 goToDate 功能））时，fullCalendar 都会 自动 触发对已配置事件源的请求，并向其提供日历将要显示的日期范围的开始日期和结束日期。然后，源可以使用它来过滤并返回在该范围内发生的一组事件。

这是一个使用自定义回调函数作为事件源的非常简单的演示：

document.addEventListener("DOMContentLoaded", function() {
  var calendarEl = document.getElementById("calendar");
  var calendar = new FullCalendar.Calendar(calendarEl, {
    nowIndicator: true,
    headerToolbar: {
      left: "prev,next today",
      center: "title",
      right: "dayGridMonth,timeGridWeek,timeGridDay,listMonth"
    },
    initialView: "timeGridWeek",
    events: fetchEvents
  });

  calendar.render();
});


//date data just for demo purposes
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

//static list of events for demo purposes. In a real scenario  you'd be more likely to make an AJAX request to a server-side API which then gets event data from a database, or something like that.
var events = [{
    title: "Sales Meeting",
    start: new Date(y, m, d - 1, 10, 30),
    end: new Date(y, m, d - 1, 11, 30),
    allDay: false
  },
  {
    title: "Marketing Meeting",
    start: new Date(y, m, d, 11, 30),
    end: new Date(y, m, d, 12, 30),
    allDay: false
  },
  {
    title: "Production Meeting",
    start: new Date(y, m, d + 2, 15, 30),
    end: new Date(y, m, d + 2, 16, 30),
    allDay: false
  },
  {
    title: "Management Meeting",
    start: new Date(y, m, d + 10, 14, 30),
    end: new Date(y, m, d + 10, 16, 30),
    allDay: false
  },
  {
    title: "Board Meeting",
    start: new Date(y, m, d - 10, 08, 30),
    end: new Date(y, m, d - 10, 16, 30),
    allDay: false
  },
  {
    title: "Annnual Conference",
    start: new Date(y, m, d - 5),
    end: new Date(y, m, d + 1),
    allDay: true
  }
]

//callback which conforms to the specification at https://fullcalendar.io/docs/events-function
function fetchEvents(info, successCallback, failureCallback) {

  var filteredEvents = events.filter((event) => {
    let maxStart = new Date(Math.max(info.start, event.start));
    let minEnd = new Date(Math.min(info.end, event.end));
    return (maxStart < minEnd);
  });

  console.log(filteredEvents);
  successCallback(filteredEvents);
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

#calendar {
  max-width: 1100px;
  margin: 40px auto;
}

<link href="https://cdn.jsdelivr.net/npm/fullcalendar/main.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/fullcalendar/index.global.min.js"></script>

<div id='calendar'></div>

除了正确配置事件源之外，您不需要执行任何其他操作。