持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情

在本文中，我们将介绍如何借助FullCalendar 在 React 中构建月、周和日日历视图，以及研究插件可以使用的各种功能和自定义项。

FullCalendar 简介

FullCalendar 是一个用于创建日历界面的 JavaScript 库。它是开源的，具有 React 和许多其他框架的适配器以及 TypeScript 支持。

FullCalendar 受欢迎的原因：除了易于使用之外，它还具有许多用于自定义的内置功能和插件。

该库提供各种日历视图，例如每月、每周和每天。FullCalendar 还有 TimeGrid 和 DayGrid 视图。

fullcalendar timegrid view.png

最重要的是，FullCalendar可以自定义视图，为用户创建真正独特的日历体验。

插件系统

正如前面所提到的，FullCalendar 具有广泛的插件可以用来添加额外的功能。

不需要下载整个库代码，可以选择要包含的插件。这样做可以减少代码库的大小，并使管理依赖项变得更简单。

一些流行的插件包括：

@fullcalendar/interaction：提供点击、触摸和拖动交互。
@fullcalendar/daygrid：提供每月、每日和每周日历视图。
@fullcalendar/timegrid：提供时间网格视图。
@fullcalendar/list：提供简化的列表视图。

还有许多其他插件可用，包括高级插件，有关插件的完整列表，请查看文档。

下面让我们看看如何将 FullCalendar 与 React 结合使用。

设置基本视图

安装核心的 npm 包：

yarn add @fullcalendar/daygrid @fullcalendar/react

添加 FullCalendar 组件并包含日期网格插件：

import FullCalendar from "@fullcalendar/react";
import daygridPlugin from "@fullcalendar/daygrid";

export const MyCalendar = () => {
  return (
    <div>
      <FullCalendar plugins={[daygridPlugin]} />
    </div>
  );
};

可以看到该月历视图是自适应的。

自定义顶部工具栏并添加每周和每日视图。FullCalendar提供了一个headerToolbar属性：可以使用它来选择想要查看的空间：

import FullCalendar from "@fullcalendar/react";
import daygridPlugin from "@fullcalendar/daygrid";

const MyCalendar = () => {
  return (
    <div>
      {/* <FullCalendar plugins={[daygridPlugin]} /> */}
      <FullCalendar
        headerToolbar={{
            start: "today prev next",
            end: "dayGridMonth dayGridWeek dayGridDay",
        }}
        plugins={[daygridPlugin]}
        views={["dayGridMonth", "dayGridWeek", "dayGridDay"]}
        />;
    </div>
  );
};

export default MyCalendar;

结果如下：

使用 FullCalendar 添加视图就是这么简单！

添加交互事件

安装@fullcalendar/interaction 插件

$ yarn add @fullcalendar/interaction

为了使日历具有交互性，需要将props中editable和selectable 设置为 true 并包含interactionsPlugin在插件数组中。

将事件存储在组件的状态中，也可以轻松地将它们存储在远程数据库或本地存储中：

安装核心的 npm 包：

$ yarn add @fullcalendar/interaction

import FullCalendar from "@fullcalendar/react";
import daygridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import { useState } from "react";

const MyCalendar = () => {
    const [events] = useState([]);
  return (
    <div>
      {/* <FullCalendar plugins={[daygridPlugin]} /> */}
      {/* <FullCalendar
        headerToolbar={{
            start: "today prev next",
            end: "dayGridMonth dayGridWeek dayGridDay",
        }}
        plugins={[daygridPlugin]}
        views={["dayGridMonth", "dayGridWeek", "dayGridDay"]}
        />; */}
        <FullCalendar
        editable
        selectable
        events={events}
        headerToolbar={{
          start: "today prev next",
          end: "dayGridMonth dayGridWeek dayGridDay",
        }}
        plugins={[daygridPlugin, interactionPlugin]}
        views={["dayGridMonth", "dayGridWeek", "dayGridDay"]}
      />
    </div>
  );
};

export default MyCalendar;

此时，您会注意到日历变得可单击，但单击时没有任何反应。因为还没有添加处理事件。

添加事件

为了允许添加事件，需要向select添加一个方法，每当用户在我们的日历上选择一个日期时就会触发该方法：

import FullCalendar from "@fullcalendar/react";
import daygridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
import { useState } from "react";
import { v4 as uuid } from "uuid";

const MyCalendar = () => {
    const [events, setEvents] = useState([]);

  const handleSelect = (info) => {
    const { start, end } = info;
    const eventNamePrompt = prompt("Enter, event name");
    if (eventNamePrompt) {
      setEvents([
        ...events,
        {
          start,
          end,
          title: eventNamePrompt,
          id: uuid(),
        },
      ]);
    }
  };

  return (
    <div>
      <FullCalendar
        editable
        selectable
        events={events}
        select={handleSelect}
        headerToolbar={{
          start: "today prev next",
          end: "dayGridMonth dayGridWeek dayGridDay",
        }}
        plugins={[daygridPlugin, interactionPlugin]}
        views={["dayGridMonth", "dayGridWeek", "dayGridDay"]}
      />
    </div>
  );
};

export default MyCalendar;

代码非常简单：我们添加了一个handleSelect接受info对象作为参数的回调。此对象包含有关用户选择的日期的信息。

借助该prompt()功能，我们向用户询问事件标题并创建一个具有开始、结束、标题和 ID 的新事件。

该id属性需要是一个唯一的字符串，这就是我们使用该uuid库的原因。

要编辑事件，使用eventClick方法。对于处理拖放操作，可以使用eventChange方法。

此时有了一个功能正常的日历，并且支持添加事件。接下来，让我们看看如何自定义事件。

自定义事件

要自定义事件内容，将使用eventContent接受回调函数的 prop。回调必须返回一个 React 组件并接收事件info对象：

<FullCalendar
  editable
  selectable
  events={events}
  select={handleSelect}
  headerToolbar={{
    start: "today prev next",
    end: "dayGridMonth dayGridWeek dayGridDay",
  }}
  eventContent={(info) => <EventItem info={info} />}
  plugins={[daygridPlugin, interactionPlugin]}
  views={["dayGridMonth", "dayGridWeek", "dayGridDay"]}
/>;

这是EventItem组件：

const EventItem = ({ info }) => {
  const { event } = info;
  return (
    <div>
      <p>{event.title}</p>
    </div>
  );
};

下图中可以看到我输入的自定义内容： eventContent info

截屏2022-10-11 下午2.57.36.png

结论

在本文中，介绍了在 React 中使用 FullCalendar 构建月、周和日日历视图。在 React 中添加日历并不像看起来那么困难。在 FullCalendar 的帮助下，它可以很容易地完成。

在 React 中构建月、周和日日历视图-FullCalendar