前言
日历是一类非常常见的前端组件，@fullcalendar 是一个全面的日历解决方案，并且还提供了一些额外的插件，@fullcalendar/resource-daygrid 就是其中之一，它提供了一种基于资源的 dayGrid 视图，本篇文章将介绍该 npm 包的使用教程。
安装
在使用 @fullcalendar/resource-daygrid 之前，需要先安装 @fullcalendar。
--- ------- ------------------
然后再安装 @fullcalendar/resource-daygrid。
--- ------- ------------------------------
引入
在引入 @fullcalendar/resource-daygrid 之前，请确保已经引入了必要的依赖项，包括 @fullcalendar/core 和相关样式。
----- ---------------- ---------------------------------- -- ----- ---------------- ------------------------------------- -- ----- ---------------- -------------------------------------- -- ----- ---------------- --------------------------------------------- -- ----- ---------------- ---------------------------------------------- -- ------- ------------------------------------------ ------- ------------------------------------------------- ------- --------------------------------------------- ------- ---------------------------------------------- ------- ----------------------------------------------------- ------- ------------------------------------------------------
使用
为了使用 @fullcalendar/resource-daygrid，你需要创建一个 FullCalendar 实例，并将 resourceDayGridPlugin 插件作为其插件之一。
------ - -------- - ---- --------------------- ------ ------------- ---- ------------------------ ------ --------------------- ---- --------------------------------- ----- -------- - --- -------------------- - -------- - -------------- --------------------- -- ------------ ---------------------- -- --- ---
在这个例子中，我们创建了一个日历实例，并调用了 resourceDayGridPlugin() 方法。插件提供的视图有两种：resourceDayGridWeek 和 resourceDayGridDay，前者是基于资源的 week 视图，后者是基于资源的 day 视图。
你还需要提供一个资源数组，以及每个事件对应的资源 ID。
----- --------- - - - --- ---- ------ --------- -- -- - --- ---- ------ --------- -- -- -- ----- ------ - - - --- ---- ----------- ---- ------ ------ --- ------ ------------------- ---- ------------------ -- - --- ---- ----------- ---- ------ ------ --- ------ ------------------- ---- ------------------ -- - --- ---- ----------- ---- ------ ------ --- ------ ------------------- ---- ------------------ -- --
最后将资源数组和事件数组传入 FullCalendar 实例中。
------------------------------- ----------- --------------------------------
配置
除了上述参数外，你还可以对资源视图进行一些自定义配置。
点击事件
你可以为资源视图中的单元格添加点击事件。
----- -------- - --- -------------------- -
-------- - -------------- --------------------- --
------------ ----------------------
-- ---
--------------- -
-- --------------- -
-------------- ------------ -- -------- ----------------------
-
--
---在这个例子中，我们为整个视图添加了一个 dateClick 事件，而不是为一个单元格添加事件。当你点击单元格时，会返回一个包含 date 和 resource 的信息对象。
自定义单元格内容
你可以自定义单元格的内容。
----- -------- - --- -------------------- -
-------- - -------------- --------------------- --
------------ ----------------------
-- ---
-------------------- -
------------------------------------------------ - ------- ------- --- ------------------------
--
---在这个例子中，我们为每个单元格的 fc-cell-text 元素添加了自定义内容。
资源标签
你可以为资源添加标签。
----- --------- - -
-
--- ----
------ --------- ---
----- -
- ------ ---- --- -------- ------- --
- ------ ---- --- -------- ------- --
--
--
-
--- ----
------ --------- ---
----- -
- ------ ---- --- -------- ------- --
- ------ ---- --- -------- ------- --
--
--
--在这个例子中，我们为每个资源添加了两个标签。你可以在 resourceRender 中获取这些信息，并将其添加到相应的单元格之外。
----- -------- - --- -------------------- -
-------- - -------------- --------------------- --
------------ ----------------------
-- ---
-------------------- -
------------------------------------------------ - ------- ------- --- ------------------------
----- ------ - ------------------------------
-----------------------------
-------------------------------------------- -- -
----- ----- - -------------------------------
--------------- - ----------
---------------------------------
--------------------------
---
----------------------------
--
---在这个例子中，我们为单元格添加了一个标签容器，然后为每个标签创建了一个 span 元素。你可以在样式表中设置这些标签的样式。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/fullcalendar-resource-daygrid