npm 包 @mirror/react-big-calendar 使用教程

阅读时长 15 分钟读完

概述

@mirror/react-big-calendar 是一个 React 大型日历组件，它可以提供一些常用的日历功能，如事件，日历视图，拖放，缩放等。它基于 react-big-calendar 进行开发，但是添加了很多国际化和主题等功能。

安装

可以通过 npm 安装 @mirror/react-big-calendar，运行下面的命令：

使用

首先，通过导入您需要的东西来导入它：

然后，您需要将所需的视图导入日历组件：

接下来，您需要准备您的事件数据，每个事件必须具有以下属性：

  • start：开始时间，必须是 JavaScript Date 对象。
  • end：结束时间，必须是 JavaScript Date 对象。
  • title：事件的标题。
  • allDay：可选，该事件是否是全天事件，默认为 false。
  • resource：可选，事件的资源 ID。如果在事件分组中使用了资源视图，则保存在该属性中的值将用作组标题。
-- -------------------- ---- -------
----- ------ - -
  -
    ------ --- -------
    ---- --- -------------------- ---------
    ------ -----------
    ----------- -
  --
  ---
--

现在，您已经准备好渲染您的日历组件。

-- -------------------- ---- -------
----- ---------- - ----- -- -
  -----
    ------------
      ---------------
      -------------- ----- ---- --------
      ---------
      -----------------
      ---------------- -------
    --
  ------
--

参数

@mirror/react-big-calendar 可以提供多个配置选项来自定义日历。

以下是一些常用的配置：

events

events 属性是相应日历上渲染的事件列表。该属性必须为数组，包含事件对象。(start and end dates 必须是 JavaScript Date 对象)。

-- -------------------- ---- -------
----- ------------ - -
   -
    ------ --- -------
    ---- --- -------------------- ---------
    ------ -----------
  --
  ---
--

----- ---------- - ----- -- -
  -----
    ------------
      ---------------------
    --
  ------
--

localizer

localizer 是每个可以允许您本地化日期格式的本地化器组件的属性。moment.js 提供了一些预定义的本地化器，可以方便地使用。

下面是如何使用 moment.js 惯用语来本地化您的日历：

-- -------------------- ---- -------
------ ------ ---- --------
------ ---------------------

----- ------- - -
  -------- ---------------------- -
    ----- -
      ---- --
      ---- --
    --
    ------- ----------------
    ------------ ---------------------
    --------- ------------------
    -------------- -----------------------
    ------------ ---------------------
    --------------- -
      --- ----- ---
      ---- -------- ---
      -- -------------
      --- ------------
      ---- -------------- ---
      ----- ------------------ ---
    --
    --------- -
      -------- ---------
      -------- ---------
      --------- -----------
      -------- ---------
      --------- -----------
      --------- ----
    --
    --------------- -
      -- ------ - -- -
        ------ -----
      -
      -- ------ - -- -
        ------ -----
      -
      -- ------ - --- -
        ------ -----
      -
      -- ------ - --- -
        ------ -----
      -
      -- ------ - --- -
        ------ -----
      -
      -- ------ - --- -
        ------ -----
      -
      -- ------ - --- -
        ------ -----
      -
      ------ -----
    --
  ---
  -------- -----
--

----- --------- - ------------------------------------

----- ---------- - ----- -- -
  -----
    ------------
      ---------------------
      ---------------------
    --
  ------
--

style

在 @mirror/react-big-calendar 中，默认值为样式对象 {}。如果在一个项目中有许多 BigCalendar 呈现，您可能需要在多个 CSS 文件之间通用一些样式。

以下是例子：

-- -------------------- ---- -------
----- ---------------- - ------- ------ ---- ----------- -- -
  ----- --------------- - --- - ---------------
  ----- ----- - -
    ----------------
    ------------- ------
    ------ --------
    ------- ------
    -------- --------
  --
  ------ -
    ------
  --
--

----- ------------ - -
  ---------- -------
--

----- ---------- - ----- -- -
  ---- ---------------------
    ------------
      ---------------------
      ---------------------
      ---------------------
      -----------------
      ----------------------------------
      -----------------------------
      ---------------- ------- -------
      -------------------- -- ------------------------------
      ------------------ -- ----------------------------
    --
  ------
--

startAccessor, endAccessor

通过指定 startAccessor 和 endAccessor，可以使用不同的属性名称来设置事件的开始时间和结束时间。start 和 end 属性是组件默认值，如果您使用这样的属性，则可以忽略此选项。

-- -------------------- ---- -------
----- ---------- - ----- -- -
  -----
    ------------
      ---------------------
      ---------------------
      -------------------------
      ---------------------
    --
  ------
--

min, max

设置一个 min 或 max 值来限制可以查看的日历日期。值可以是 JavaScript Date 或当天的字符串形式 yyyy-mm-dd。

-- -------------------- ---- -------
----- ---------- - ----- -- -
  -----
    ------------
      ---------------------
      ---------------------
      -------- -------
      -------- -------------------- -----------
    --
  ------
--

messages

默认情况下，@mirror/react-big-calendar 和 moment 本地化器使用英文。可以设置 messages 来为您的语言设置本地化文本。

-- -------------------- ---- -------
----- --------- - ------------------------------------
----- -------- - -
  ------- -----
  --------- ----
  ----- ----
  ------ -----
  ------ ----
  ----- ----
  ---- ----
  ------- -----
  ----- -----
  ----- -----
  ------ -----
--

----- ---------- - ----- -- -
  -----
    ------------
      ---------------------
      -------------------
      ---------------------
    --
  ------
--

selectable

您可以使用 selectable prop 使您的日历可选。默认情况下，仅在Day视图中启用此选项。使用时间上下文创建新事件或块。

-- -------------------- ---- -------
----- ---------- - ----- -- -
  -----
    ------------
      ----------
      ---------------- ------ --- -- -- ------------------ -----
      ---------------------
    --
  ------
--

onSelectEvent

默认情况下，单击事件将触发相应的 console.log() 然后输入相应的事件对象，但是可以使用 onSelectEvent 回调传递它以执行可能的函数或操作。

-- -------------------- ---- -------
----- ---------- - ----- -- -
  -----
    ------------
      ----------
      -------------------- -- -------------------
      ---------------------
    --
  ------
--

onSelectSlot

默认情况下，单击时间将触发相应的 console.log() 输出时间范围内的开始和结束时间，但是 onSelectSlot 可用于将预期的回调传递给每次在可选可见的时间存在空闲时间时调用 (单击然后拖动以创建一个新事件)。

-- -------------------- ---- -------
  ----- ---------- - ----- -- -
    -----
      ------------
        ----------
        ---------------- ------ ---- ----- -- --
          ------------------ ---- ------
        -
        ---------------------
      --
    ------
  --

components

如果希望自定义其渲染元素，可以使用 components object 控制日历的所有组件。

-- -------------------- ---- -------
----- ---------- - ----- -- -
  -----
    ------------
      -------------------------------
      ---------------------
      -------------
        -------- ----------
        ------ --------
        ------- -
          ------ ------------
        --
      --
      -----------------------------
      ------------ -- --------------- ------------ ---- ---
      --------------------------------------
      ------------------------------------
      --------------------------------
    --
  ------
--

可选择的视图

除了默认的月、周和日视图，还可以使用以下选项添加更多的视图。

  • AGENDA：预约视图
  • WEEK: 一周视图
  • WORK_WEEK: 工作日视图
  • DAY: 日视图
  • DATE: 日期视图
  • MONTH: 月视图

例如，添加工作日视图:

-- -------------------- ---- -------
------ - --------- ----- - ---- -----------------------------
------ -------- ---- ----------------------------------

----- - ----- ---- ------ - - ------

----- -------- - ----- -- -
  ---------
    ----------
    -----------------------
    -------- ---------- -------- --
  --
--

----- ---------- - ----- -- -
  -----
    --------- --------------------- --
  ------
--

结尾

现在，您已经掌握了 @mirror/react-big-calendar 的使用方法，您可以在项目或应用程序中使用它来提供专业的日程安排和日历功能。

完整示例代码

-- -------------------- ---- -------
------ ----- ---- -------
------ ----------- ---- ----------------------------
------ ------ ---- --------
------ ---------------------
------ ---------------------------------------------------

------ - --------- ----- - ---- ----------------------------
----- - ------ ----- ---- ------ - - -----

----- ----------- - -----------------------------------
----- ------------ - -
  -
    ------ --- -------------------
    ---- --- -------------------
    ------ ------
  -
-

----- ---------- - ----- -- -
  -----
    ------------
      -----------------------
      ---------------------
      ---------------------
      -----------------
      ---------
      -------- ------ ---- --
      ---------------- -------
      -------------------- -- -------------------
      ---------------------- --
        ------
          --------- ----- --------- ---------------------------------- - -
            ------- -------------------------------- - -
            ---------- -------------------
        -
      -
      -------------------------
      -------- ---------- -- ---
      -------- ---------- -- ---
      --------- -------
      -----------
        ------- -----
        --------- ----
        ----- ----
        ------ -----
        ------ ----
        ----- ----
        ---- ----
        ------- -----
        ----- -----
        ----- -----
        ------ ----
      --
    --
  ------
-

------ ------- ----------

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006735b890c4f7277583f80

纠错
反馈
相关推荐
精选内容