Question

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

有人在这个例子上有例子吗？

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

在 FullCalendar 版本 v5 中不再有日期渲染。可以使用 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
    }}
/>

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

FullCalendar（React）-获取当前星期/月份的日期

3 个答案: