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

FullCalendar是一个用于创建可定制的日历和日程表的JavaScript库。它提供了丰富的功能和灵活的配置选项，可以轻松地集成到React应用程序中。

FullCalendar (React)是FullCalendar库的React版本，专门为React开发者提供了一个易于使用和集成的组件。它允许您在React应用程序中创建交互式的日历和日程表，并提供了许多可自定义的选项和事件。

要获取当前周或月的日期，您可以使用FullCalendar (React)提供的API和方法。以下是一些示例代码：

获取当前周的日期范围：

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;

在上面的代码中，我们创建了一个名为Calendar的React组件，并使用FullCalendar (React)的API获取了当前周的起始日期和结束日期。当用户点击按钮时，handleWeekClick函数会被调用，其中calendarApi.view.activeStart表示当前周的起始日期，calendarApi.view.activeEnd表示当前周的结束日期。

获取当前月的日期范围：

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;

在上面的代码中，我们创建了一个名为Calendar的React组件，并使用FullCalendar (React)的API获取了当前月的起始日期和结束日期。当用户点击按钮时，handleMonthClick函数会被调用，其中calendarApi.view.activeStart表示当前月的起始日期，calendarApi.view.activeEnd表示当前月的结束日期。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。

腾讯云云服务器（CVM）：提供可扩展的云服务器实例，适用于各种规模的应用程序和工作负载。您可以根据需要选择不同的配置和操作系统，并灵活管理您的云服务器。
腾讯云对象存储（COS）：提供安全可靠的对象存储服务，适用于存储和管理各种类型的数据，包括文档、图片、音视频文件等。它具有高可用性、高可靠性和高扩展性，并提供简单易用的API和控制台界面。

您可以通过以下链接了解更多关于腾讯云云服务器和对象存储的信息：