什么是 @fullcalendar/resource-timegrid？
@fullcalendar/resource-timegrid 是一个基于 FullCalendar 的 npm 包，用于在 FullCalendar 中展示有资源分配的事件。它提供了一种叫做 RESOURCE_DAY_GRID 和 RESOURCE_WEEK_GRID 的预先设计好的 views（视图），可以让用户轻松地展示和管理资源、事件和时间。此外，它还支持拖拽和放大等常规操作，以便更好地管理用户的事件和资源。
安装 @fullcalendar/resource-timegrid
在使用 @fullcalendar/resource-timegrid 之前，我们需要先安装它。可以使用 npm 或 yarn 来安装 @fullcalendar/resource-timegrid，它是 FullCalendar 的一个插件。
使用 npm 安装
在命令行中输入以下命令：
npm install @fullcalendar/core @fullcalendar/resource-timegrid
使用 yarn 安装
在命令行中输入以下命令：
yarn add @fullcalendar/core @fullcalendar/resource-timegrid
使用 @fullcalendar/resource-timegrid
在成功地安装了 @fullcalendar/resource-timegrid 后，我们可以开始使用它了。比如，我们可以创建一个 HTML 页面，并在其中引入 FullCalendar 和 @fullcalendar/resource-timegrid 的 js 和 css 文件。如下所示：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- --------------- -- ----- ----------------------------------------------- ---------------- -- ----- ------------------------------------------------------------ ---------------- -- ------- ------------------------------------------------------- ------- ---------------------------------------------------------------- ------- -------------------------------------------------------------------- ------- ------ ---- -------------------- ------- -------展开代码
如上代码所示，我们需要将 FullCalendar 和 @fullcalendar/resource-timegrid 的 js 和 css 文件引入到我们的 HTML 文件中。值得注意的是，我们还需要引入一个语言包（此处为中文语言包）以提供全球化支持。接下来，我们在我们的 HTML 文件中加入以下 JavaScript 代码：
-- -------------------- ---- ------- --- -------- - ---------------------- --- ---------------- - ------------------------------ --- -------- - --- --------------------------------------------- - -------- - ---------------- -- -------- - ----- -- --------- ------ ------- - ----- ---------- ------- ------- -------- ------ ------------------------------------------------------------------- -- ------------ ----------------------- ------ - -------------------- - ----- ------------------- --------- - ----- - -- ----------- -- ----- -- --------------------- - ----- ------------------- --------- - ------ - -- ----------- -- ----- - -- ---------- - - --- ---- ------ --- -- -- - --- ---- ------ --- -- -- - --- ---- ------ --- -- - -- ------- - - ----------- ---- ------ ---------------------- ---- ---------------------- ------ --- -- -- - ----------- ---- ------ ---------------------- ---- ---------------------- ------ --- -- -- - ----------- ---- ------ ---------------------- ---- ---------------------- ------ --- -- -- - ----------- ---- ------ ---------------------- ---- ---------------------- ------ --- -- -- - ----------- ---- ------ ---------------------- ---- ---------------------- ------ --- -- - - --- ------------------展开代码
上述 JavaScript 代码创建了 FullCalendar 的实例，并配置了资源、事件以及视图等内容。此处创建了两种视图：RESOURCE_DAY_GRID 和 RESOURCE_WEEK_GRID。我们接下来详细解释一下代码的具体含义。
配置资源
我们需要在日程中展示不同的资源。在上述代码中，我们定义了三个不同的资源：
resources: [ { id: 'a', title: '资源 A' }, { id: 'b', title: '资源 B' }, { id: 'c', title: '资源 C' } ],
在这里，我们为每一个资源指定了一个 id 和一个 title，这些将会在我们的 FullCalendar 中使用。现在我们已经定义了资源，接下来我们需要为这些资源添加事件。
配置事件
对于每一个资源，我们需要在 FullCalendar 中定义它们的事件。在上述代码中，我们定义了五个不同的事件：
events: [ { resourceId: 'a', start: '2021-08-16T02:00:00', end: '2021-08-16T03:00:00', title: '事件 A' }, { resourceId: 'a', start: '2021-08-16T06:00:00', end: '2021-08-16T09:00:00', title: '事件 B' }, { resourceId: 'b', start: '2021-08-16T05:00:00', end: '2021-08-16T07:00:00', title: '事件 C' }, { resourceId: 'c', start: '2021-08-16T03:00:00', end: '2021-08-16T04:00:00', title: '事件 D' }, { resourceId: 'c', start: '2021-08-18T01:00:00', end: '2021-08-18T03:00:00', title: '事件 E' } ]
在这里，我们为每个事件指定了资源的 id，起始时间、结束时间，以及事件的名称。FullCalendar 将按照这些参数将事件分配到适当的资源中。
配置视图
在 FullCalendar 中，要改变视图，需要指定 defaultView 或使用 header 中的 button。 在上述代码中，我们创建了两个自定义的视图：RESOURCE_DAY_GRID 和 RESOURCE_WEEK_GRID。
-- -------------------- ---- ------- ------------ ----------------------- ------ - -------------------- - ----- ------------------- --------- - ----- - -- ----------- -- ----- -- --------------------- - ----- ------------------- --------- - ------ - -- ----------- -- ----- - --展开代码
在这里，我们创建了一个默认视图 RESOURCE_WEEK_GRID，还创建了两种自定义视图：RESOURCE_DAY_GRID 和 RESOURCE_WEEK_GRID，类型为 'resourceTimeGrid'。我们还为这些视图指定了不同的持续时间（duration），即显示的日期区间，以及显示名称（buttonText）。
渲染 FullCalendar
最后，我们调用 rendering 函数渲染 FullCalendar。
calendar.render();
这样，我们就完成了对 @fullcalendar/resource-timegrid 的配置。接下来，我们可以运行我们的应用程序，查看其功能。
示例代码
完整的 HTML 和 JavaScript 代码如下：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- --------------- -- ----- ----------------------------------------------- ---------------- -- ----- ------------------------------------------------------------ ---------------- -- ------- ------------------------------------------------------- ------- ---------------------------------------------------------------- ------- -------------------------------------------------------------------- ------- ------ ---- -------------------- -------- --- -------- - ---------------------- --- ---------------- - ------------------------------ --- -------- - --- --------------------------------------------- - -------- - ---------------- -- -------- - ----- -- --------- ------ ------- - ----- ---------- ------- ------- -------- ------ ------------------------------------------------------------------- -- ------------ ----------------------- ------ - -------------------- - ----- ------------------- --------- - ----- - -- ----------- -- ----- -- --------------------- - ----- ------------------- --------- - ------ - -- ----------- -- ----- - -- ---------- - - --- ---- ------ --- -- -- - --- ---- ------ --- -- -- - --- ---- ------ --- -- - -- ------- - - ----------- ---- ------ ---------------------- ---- ---------------------- ------ --- -- -- - ----------- ---- ------ ---------------------- ---- ---------------------- ------ --- -- -- - ----------- ---- ------ ---------------------- ---- ---------------------- ------ --- -- -- - ----------- ---- ------ ---------------------- ---- ---------------------- ------ --- -- -- - ----------- ---- ------ ---------------------- ---- ---------------------- ------ --- -- - - --- ------------------ --------- ------- -------展开代码
在运行应用程序后，您将看到一个 FullCalendar 实例，其中包括三个资源 '资源 A'、'资源 B' 和 '资源 C'，并有五个事件包含在这些资源中。您可以使用 FullCalendar 的其他功能来管理这些资源和事件。
意义与指导
通过这篇文章，我们详细介绍了 FullCalendar 插件 @fullcalendar/resource-timegrid 的使用，让读者能够掌握这一插件的基本方法和要素，并在实际应用中使用。同时，本文还可作为学习 FullCalendar 插件编写的教程进行参照。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/115814
