在不使用日期选择器的情况下获取完整日历的第一个和最后一个可见日期

Question

我在我的代码中使用了 fullcalendar，并在其中实现并添加了事件，但我的目标是获取日历的第一个可见日期和最后一个可见日期。

我们想要做的是获取可见的第一个和最后一个日期，以便我们能够将提取的日期放入数据库并获取该日期范围内的所有事件。

我已经尝试过Get the start and end dates visible in a datepicker days view?，但我只想使用 jQuery 和 fullCalendar。有没有其他方法可以在不使用 datepicker 的情况下提取日期？

Answer 1

是否可以获取第一周的第一个日期和最后一个日期 完整日历的最后一周

...很容易 - 在最新版本（撰写本文时为 v5）中，您只需询问 current view 和 has properties which contain those dates。

不过，你也说过这是

这样我们就可以将提取的日期放入数据库中，然后 获取该日期范围内的所有事件。

如果这是您的目的，您没有理由手动执行此操作。 FullCalendar 已经提供了指定事件源的方法 - 您可以简单地 point it at a URL 以 fullCalendar 事件格式返回 JSON，或者如果您需要更大的灵活性，您可以 define a callback function 使用自定义代码来获取事件从他们的来源。

这两种方法的关键在于自动完成全日历

• 每次日历上的日期范围更改时调用 URL / 运行该函数，并且

• 为您提供新日期范围的开始和结束日期，以便您的服务器可以过滤它返回的事件，使其仅属于该范围内的事件。

您无需花时间手动尝试从日历中提取日期范围或通过其他方法为其提供事件。

Answer 2

使用 5.5.1 版，您可以检查 渲染的 HTML。白天单元格有 fc-daygrid-day 和 data-date="{date}" 类

鉴于原始 div id 是“日历”，您可以使用：

var cells = $("#calendar td.fc-daygrid-day");
console.log(cells.length, cells.first().data("date"), cells.last().data("date"))

示例 sn-p：

$(function() { 
  var calendarEl = document.getElementById('calendar');
  var calendar = new FullCalendar.Calendar(calendarEl, {
    initialView: 'dayGridMonth'
  });
  calendar.render();
  
  var cells = $("#calendar td.fc-daygrid-day");
  console.log(cells.length, cells.first().data("date"), cells.last().data("date"))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.5.1/main.css">

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