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

Question

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

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

我试过但我只想使用 jQuery 和 fullCalendar。有没有其他方法可以在不使用日期选择器的情况下提取日期？

Answer 1

使用 5.5.1 版本，您可以检查 渲染的 HTML。日期单元格有 class 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"))

示例片段：

$(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>

Answer 2

Is it possible to get the first date of the first week and last date of the last week of the fullcalendar

...是的，很容易 - 在最新版本（撰写本文时为 v5）中，您只需请求 current view and it has properties which contain those dates.

不过你也说这是

so that we'll be able to throw the extracted dates in the database and get all events within that range of dates.

如果这是您的目的，您没有理由手动执行此操作。 FullCalendar 已经提供了指定事件源的方法 - 您可以简单地 point it at a URL which returns JSON in the fullCalendar events format, or if you need more flexibility, you can define a callback function，您可以在其中使用自定义代码从事件源中获取事件。

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

调用 URL / 每次日历上的日期范围更改时运行该函数，并且
为您提供新日期范围的开始和结束日期，以便您的服务器可以过滤它 returns 的事件，使其仅成为该范围内的事件。

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

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

Get the first and last visible date of the fullcalendar without using datepicker

jquery

fullcalendar

fullcalendar-2