0

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

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

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

在此处输入图像描述

4

2 回答 2

1

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

...很容易 - 在最新版本（撰写本文时为 v5）中，您只需询问当前视图，它具有包含这些日期的属性。

但是，你也说这是

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

如果这是您的目的，您没有理由手动执行此操作。FullCalendar 已经提供了指定事件源的方法 - 您可以简单地将其指向以fullCalendar 事件格式返回 JSON 的 URL，或者如果您需要更大的灵活性，您可以定义一个回调函数，您可以在其中使用自定义代码从它们的源中获取事件。

这两种方法的关键是自动全日历

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

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

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

于 2021-03-24T10:04:17.960 回答
0

使用 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"))

示例片段：

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

于 2021-03-24T08:59:17.917 回答