前言
@fullcalendar/list 是 FullCalendar 的一个子模块，它可以提供一个简单的列表视图，用于展示日历中的事件。在这篇文章中，我们将介绍如何使用这个 npm 包来显示一个事件列表，并提供一些实用的技巧和指导。
安装
首先，我们需要使用 npm 来安装 @fullcalendar/list：
npm install @fullcalendar/list
安装完成后，我们就可以使用这个包了。
基本用法
来看一下 @fullcalendar/list 的基本用法：
-- -------------------- ---- -------
------ - -------- - ---- ---------------------
------ ---------- ---- ---------------------
----- -------- - --- --------------------------------------------- -
-------- -------------
------------ ------------
------- -
-
------ ------ ---
------ -------------
---- -------------
--
-
------ ------ ---
------ -------------
---- -------------
--
--
---
------------------这里我们首先引入 Calendar 和 listPlugin，然后使用 new Calendar 来初始化一个日历，并设置 plugins 字段为 [listPlugin]，表明我们要使用列表视图插件。defaultView 字段被设置为 "listMonth"，表示默认视图为月份的列表视图。最后，我们通过 events 字段来设定要展示的事件列表。
这段代码的效果如下图所示：
高级用法
@fullcalendar/list 提供了许多选项和回调函数，让我们可以更加灵活地控制列表的展示和交互效果。接下来，我们将介绍一些实用的技巧和示例。
自定义标题和内容
我们可以通过 eventRender 回调函数来自定义事件条目的标题和内容。例如，我们可以在标题前加上一个图标，或者显示更多的信息。
-- -------------------- ---- -------
----- -------- - --- --------------------------------------------- -
-------- -------------
------------ ------------
------- -
-
------ ------ ---
------ -------------
---- -------------
------------ ----- -- ----- ---
--
-
------ ------ ---
------ -------------
---- -------------
------------ ----- -- ----- ---
--
--
------------ -------- ------ -
------ -
------ --- ---------- ------------- ---------------------
----- -------------------------------------------------
--
--
---在这个例子中，我们在标题前添加了一个星号图标，并在内容中显示了事件的描述信息。我们使用 info.event.title 和 info.event.extendedProps.description 来获取事件的标题和描述，然后将它们插入到 HTML 中。最后将标题和 HTML 作为对象返回即可。
这段代码的效果如下图所示：
支持查看更多
如果我们有很多的事件，可能需要提供一个“查看更多”按钮，用于打开日历视图或者显示更多的内容。这个功能可以通过 moreLinkContent 字段和 moreLinkClick 回调函数来实现。
-- -------------------- ---- -------
----- -------- - --- --------------------------------------------- -
-------- -------------
------------ ------------
------- ------
------ -
---------- -
---------------- -------
--
--
------------ -------- ------ -
------ -
------ --- ---------- ------------- ---------------------
----- -------------------------------------------------
--
--
-------------- -------- ----- -
-- -- ---------
--
---我们在 views 字段中设置了 moreLinkContent，表示“查看更多”按钮的名称。当用户点击这个按钮时，会触发 moreLinkClick 回调函数。我们可以在这个函数中打开一个模态框或者切换到日历视图。
这段代码的效果如下图所示：
总结
@fullcalendar/list 是一个非常实用的 npm 包，它可以帮助我们快速地创建并展示一个事件列表。除了基本用法之外，我们还可以使用回调函数和选项来自定义列表的外观和交互效果。在实际开发中，我们建议根据自己的需求和风格来进行调整和拓展，以获得更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/115811