FullCalendar (React) - 获取当前周/月的日期答案

【问题标题】：FullCalendar (React) - getting dates of current week/monthFullCalendar (React) - 获取当前周/月的日期
【发布时间】：2020-07-11 21:19:44
【问题描述】：

我正在使用 FullCalendar for React，但在文档中找不到如何获取当前显示的周/月的开始和结束日期。

有人有这方面的例子吗？

【问题讨论】：

您在什么情况下需要此信息？它在 API 中的某些位置可用，因此请描述您想对这些信息做什么以及何时（例如，它可能是为了响应页面上的某些特定事件吗？）
fullcalendar.io/docs/Calendar-getDate
我希望能够对预订进行分页。在这种情况下，我需要该信息将视图的开始和结束日期发送到后端。
@wobsoriano 表示当前日期。我正在寻找当前日历视图的开始和结束日期。这是两个日期。

标签： reactjs fullcalendar

【解决方案1】：

datesRender 将在每次显示的日期更改时调用

<FullCalendar

    plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}

    datesRender={(arg) => {
      console.log(arg)
      //arg includes data about current visible dates
      console.log(arg.view.activeStart) //starting visible date
      console.log(arg.view.activeEnd) //ending visible date
    }}

  />

【讨论】：

v5 更新后无效

【解决方案2】：

FullCalendar v5 版中不再有 datesRender。可以改用datesSet，它将在日历的日期范围最初设置或更改后调用。

<FullCalendar
    plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}

    datesSet={(dateInfo) => {
        console.log(dateInfo.start) //start of the range the calendar date
        console.log(dateInfo.end) //end of the range the calendar date
    }}
/>

【讨论】：

【解决方案3】：

尝试了@sammyShenker 的回答，但没有成功。而是找到了解决方案。

<FullCalendar

datesSet={(args) => console.log("###datesSet:", args)}
/>

输出：

{
    "start": "2021-02-27T18:30:00.000Z",
    "end": "2021-04-10T18:30:00.000Z",
    "startStr": "2021-02-28T00:00:00+05:30",
    "endStr": "2021-04-11T00:00:00+05:30",
    "timeZone": "local",
    "view": {
        "type": "dayGridMonth",
        "dateEnv": {
            "timeZone": "local",
            "canComputeOffset": true,
            "calendarSystem": {},
            "locale": {
                "codeArg": "en",
                "codes": [
                    "en"
                ],
                "week": {
                    "dow": 0,
                    "doy": 4
                },
                "simpleNumberFormat": {},
                "options": {
                    "direction": "ltr",
                    "buttonText": {
                        "prev": "prev",
                        "next": "next",
                        "prevYear": "prev year",
                        "nextYear": "next year",
                        "year": "year",
                        "today": "today",
                        "month": "month",
                        "week": "week",
                        "day": "day",
                        "list": "list"
                    },
                    "weekText": "W",
                    "allDayText": "all-day",
                    "moreLinkText": "more",
                    "noEventsText": "No events to display"
                }
            },
            "weekDow": 0,
            "weekDoy": 4,
            "weekText": "W",
            "cmdFormatter": null,
            "defaultSeparator": " - "
        }
    }
}

然后根据需要使用 start/startStr/end/endStr。

【讨论】：