FullCalendar (React) - pour obtenir les dates de la semaine/mois en cours

Question

Je suis en train de jouer avec FullCalendar pour React et je n'arrive pas à trouver dans la documentation comment obtenir la date de début et de fin de la semaine/mois affichée.

Quelqu'un a-t-il un exemple à ce sujet ?

Answer 1

DatesRender sera invoqué chaque fois que les dates affichées sont modifiées

<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

J'ai essayé la réponse de @sammyShenker mais cela n'a pas fonctionné. J'ai plutôt trouvé une solution.

<FullCalendar

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

Sortie :

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

Ensuite, utilisez le start/startStr/end/endStr en fonction de vos besoins.