介绍
@fullcalendar/resource-common 是 FullCalendar 日历应用程序的一个 npm 包，提供了资源组织的基本功能。
资源通常是代表事件、任务或其他项目的概念性实体。例如，您可能有一个带设备行的资源视图，其中每个设备都是一个资源。
安装
要安装 @fullcalendar/resource-common，请使用 npm：
npm install @fullcalendar/resource-common
使用
导入
要在项目中使用 @fullcalendar/resource-common，需要将其导入到您的 JavaScript 文件中：
import { ResourceCommonPlugin } from '@fullcalendar/resource-common';使用 ResourceCommonPlugin
ResourceCommonPlugin 是 FullCalendar 应用程序中管理资源的核心插件，它允许了在日历事件中同时协调和分配各种资源。
-- -------------------- ---- -------
------ - -------- - ---- ---------------------
------ - -------------------- - ---- --------------------------------
----- -------- - --- -------------------- -
-------- -
---------------------
-- ----- ----------
--
-- ----- -------- ----------
---数据格式
@fullcalendar/resource-common 基于 FullCalendar 数据格式 扩展了 Resource 对象。
有四个关键新属性：
id：Resource 唯一标识符parentId：上级资源的 id，或 nulltitle：Resource 显示的文本eventConstraint：Resource 的可选约束。
-- -------------------- ---- -------
-
--- ----
--------- -----
------ ----
---------------- -
------ --------
---- -------
-
--
-
--- ----
--------- ----
------ ----
---------------- -
------ --------
---- -------
-
--
-
--- ----
--------- ----
------ ----
---------------- -
------ --------
---- -------
-
-使用资源视图
ResourceCommonPlugin 提供了 ResourceDayGrid 和 ResourceTimeGrid 组件，可用于显示资源列表和日历格子。
-- -------------------- ---- -------
------ - --------------- - ---- ---------------------------------
------ - ---------------- - ---- ----------------------------------
----- -------- - --- -------------------- -
-------- -
----------------
-----------------
---------------------
-- ----- ----------
--
-- ----- -------- ----------
---在日历中呈现资源视图时，您需要将资源添加到 FullCalendar 事件对象中的 resources 属性中。
{
title: 'My Event',
start: '2020-01-01',
end: '2020-01-02',
resourceId: 'a'
}示例代码
下面是一个完整的示例代码，可以快速上手 ResourceCommonPlugin 的基本用法。
-- -------------------- ---- -------
------ - -------- - ---- ---------------------
------ - -------------------- - ---- --------------------------------
------ - --------------- - ---- ---------------------------------
------ - ---------------- - ---- ----------------------------------
----- ---------- - ------------------------------------
----- -------- - --- -------------------- -
-------- -
---------------------
----------------
-----------------
-- ----- ----------
--
------------ ----------------------
------- -
----- ---------- -------
------- --------
------ ---------------------------------------------------------------
--
---------- -
- --- ---- --------- ----- ------ ------ --
- --- ---- --------- ---- ------ ----- --
- --- ---- --------- ---- ------ ----- -
--
------- -
- ------ ------ --- ----------- ---- ------ ---------------------- ---- --------------------- --
- ------ ------ --- ----------- ---- ------ ---------------------- ---- --------------------- --
- ------ ------ --- ----------- ---- ------ ---------------------- ---- --------------------- -
-
---
------------------结论
@fullcalendar/resource-common 提供了管理资源的完整功能，包括可用的资源视图以及 FullCalendar 事件对象中资源的完整数据格式。由于 ResourceCommonPlugin 是 FullCalendar 应用程序的核心插件之一，因此几乎所有 FullCalendar 用户都将受益于学习和掌握它的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/fullcalendar-resource-common