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

user_9568205 0
Viewed 3064

I am playing out with FullCalendar for React and I can't find in documentation how can I get the start and end date of the current displayed week/month.

Does anyone have example on this one?

reactjs fullcalendar
3 Answers

datesRender will invoke each time the dates displayed are changed

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

  />
user_30788100

There is no longer datesRender in FullCalendar version v5. Can use datesSet instead which will invoke after the calendar’s date range has been initially set or changed.

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

tried @sammyShenker's answer but it didn't work. Rather found a solution.

<FullCalendar

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

Output:

{
    "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": " - "
        }
    }
}

Then use the start/startStr/end/endStr as per your needs.

user_155132400
Related