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

import React from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';

const Calendar = () => {
  const calendarRef = React.createRef();

  const handleWeekClick = () => {
    const calendarApi = calendarRef.current.getApi();
    const currentDate = calendarApi.getDate();
    const startOfWeek = calendarApi.view.activeStart;
    const endOfWeek = calendarApi.view.activeEnd;

    console.log('Start of week:', startOfWeek);
    console.log('End of week:', endOfWeek);
  };

  return (
    <div>
      <FullCalendar
        ref={calendarRef}
        plugins={[dayGridPlugin]}
        initialView="dayGridMonth"
        weekends={true}
        events={[
          // your events data
        ]}
      />
      <button onClick={handleWeekClick}>Get Current Week</button>
    </div>
  );
};

export default Calendar;

import React from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';

const Calendar = () => {
  const calendarRef = React.createRef();

  const handleMonthClick = () => {
    const calendarApi = calendarRef.current.getApi();
    const currentDate = calendarApi.getDate();
    const startOfMonth = calendarApi.view.activeStart;
    const endOfMonth = calendarApi.view.activeEnd;

    console.log('Start of month:', startOfMonth);
    console.log('End of month:', endOfMonth);
  };

  return (
    <div>
      <FullCalendar
        ref={calendarRef}
        plugins={[dayGridPlugin]}
        initialView="dayGridMonth"
        weekends={true}
        events={[
          // your events data
        ]}
      />
      <button onClick={handleMonthClick}>Get Current Month</button>
    </div>
  );
};

export default Calendar;