FullCalendar (React) - 获取当前 week/month 的日期

Question

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

有人有这方面的例子吗？

Answer 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
    }}

  />

Answer 2

尝试了@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。

Answer 3

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
    }}
/>

FullCalendar (React) - 获取当前 week/month 的日期

FullCalendar (React) - getting dates of current week/month

fullcalendar

reactjs