如何在完整的日历 jquery 中获取当前显示的日期范围答案

【问题标题】：How to get current displayed date range in full calendar jquery如何在完整的日历 jquery 中获取当前显示的日期范围
【发布时间】：2015-12-22 23:33:15
【问题描述】：

我在我的应用程序中实现了fullcalendar。我在获取当前显示的日期范围时遇到问题。我想在完整日历中获取当前显示的日期范围。请给我一个合适的解决方案。

例如，请看一下这张图片

在此我想获得“9 月 20 日”和“9 月 26 日”。

【问题讨论】：

标签： jquery fullcalendar

【解决方案1】：

试试这个。

添加这个函数并调用它。它会帮助你。

  function GetCalendarDateRange() {
        var calendar = $('#calendar').fullCalendar('getCalendar');
        var view = calendar.view;
        var start = view.start._d;
        var end = view.end._d;
        var dates = { start: start, end: end };
        return dates;
    }

【讨论】：

你可以简单地返回view.start和view.end

【解决方案2】：

$('#mycalendar').fullCalendar('getView').start.format('DD MMM');
$('#mycalendar').fullCalendar('getView').end.format('DD MMM');

【讨论】：

工作得很好！ tks！

【解决方案3】：

In version 5.5.1 , you have to use

var view = calendarObj.view; // calendarObj is the reference to the fullcalendar
var start = view.activeStart;
var end = view.activeEnd;

start and end variables are Date.

【讨论】：

【解决方案4】：

在 4.0 版中，$().fullCalendar('next') 不再存在。您可以使用calender.next()，其中calender 是对象的一个实例。

例如，要捕获开始日期：日历.view.activeStart.

有关更多信息，请参阅文档：https://fullcalendar.io/docs/upgrading-from-v3

【讨论】：

【解决方案5】：

我没有足够的声誉，但我认为 user2682863 的答案是最好的。

这样您就可以使用他们的 API 而不是使用 jquery 从前端检索它。

通过访问 View 对象 (https://fullcalendar.io/docs/view-object)，您可以获得当前范围（在 Vue 中）。

var calendarApi = this.$refs.calendar.getApi();
this.dates = calendarApi.state.dateProfile.currentRange;

【讨论】：

【解决方案6】：

我通过访问calendar.state.dateProfile.currentRange找到了当前日期范围

日历在哪里

calendar = new FullCalendar.Calendar(calendarEl}

【讨论】：

【解决方案7】：

我知道这个问题已经得到解答，但上述方法在 v5 中均不适合我，因此将发布所做的。在对文档进行了相当令人沮丧的搜索之后，我遇到了这个页面。使用 datesSet 您可以获得开始和结束日期以及完整视图。

https://fullcalendar.io/docs/datesSet

如果您在 init 上添加一个处理程序，那么只要用户通过我需要的按钮更改日期，就会触发此事件：

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',
            dateClick: function (info) {
                alert('clicked ' + info.dateStr);
            },
            datesSet: function (dateInfo) {
                var start = dateInfo.start;
                var end = dateInfo.end;
                var startStr = dateInfo.startStr;
                var endStr = dateInfo.endStr;
                var timeZone = dateInfo.timeZone;
                var view = dateInfo.view;
            }
    });
    calendar.render();
  });

【讨论】：

【解决方案8】：

我正在使用带有 React 的 FullCalendar 5.8.0。我发现以下内容对我有用：

创建一个 ref 并将其传递给 FullCalendar。

const calendarRef = React.createRef() ...

FullCalendar ref={calendarRef} ...
在我需要知道可见日期范围的函数中：

让 calendarApi = calendarRef.current.getApi()

让日期 = calendarApi.currentDataManager.state.dateProfile.activeRange

【讨论】：