如果您正在开发一个需要日程安排或时间表的应用程序，那么 jQuery FullCalendar 是一个非常流行的选择。但是，FullCalendar 还提供了一种称为资源视图（Resource View）的功能，它可以让您创建一个 Gantt 图，从而更好地展示您的数据。
在本文中，我们将介绍如何在前端中使用 jQuery FullCalendar 添加资源视图/ Gantt 图。我们会探讨 FullCalendar 的基础知识、如何设置资源视图，并提供完整的示例代码和指导意义。
FullCalendar 概述
jQuery FullCalendar 是一个开源的 JavaScript 日历库，它是用于 Web 应用程序的创新解决方案。它具有可定制性强、易于使用和集成到其他应用程序中等特点。FullCalendar 能够展示一个月、周、日视图，还能添加事件、日历、拖放操作，以及资源视图（Resource View）。
什么是资源视图？
资源视图（Resource View）是 FullCalendar 中的一项功能，它可以让您将日历事件按照资源分类显示。例如，您可以将任务按照所属项目组别显示，或者将员工的工作任务按照部门进行分类。这个功能类似于 Gantt 图，让用户更加直观的了解事件的分布。
如何设置资源视图？
首先，我们需要在 FullCalendar 中调用 resourceDayGridPlugin 插件和 resourceTimeGridPlugin 插件（它们是 FullCalendar 官方提供的）。这些插件将会自动注册 FullCalendar 所需的组件。
----- ---------------- ------------------------------------------------------- -- ----- ---------------- -------------------------------------------------------- -- ------- --------------------------------------------------- ------- ---------------------------------------------------------- ------- ------------------------------------------------------ ------- ------------------------------------------------------- ------- -------------------------------------------------------------- ------- --------------------------------------------------------------- ------- ----------------------------------------------------------------
然后，我们需要定义两个数组：一个是事件数据，一个是资源数据。在本示例中，我们定义的是两个数组和一些简单的假数据。
--- --------- - - - --- ---- ------ --------- -- -- - --- ---- ------ --------- -- -- - --- ---- ------ --------- -- - -- --- ------ - - - ----------- ---- ------ ------ --- ------ ---------------------- ---- --------------------- -- - ----------- ---- ------ ------ --- ------ ---------------------- ---- --------------------- -- - ----------- ---- ------ ------ --- ------ ---------------------- ---- --------------------- - --
接下来，我们需要在 FullCalendar 中创建一个日历对象，并设置其基本属性和事件。
--- -------- - --- ---------------------------------------------------------- -
-------- - -------------- ------------------ ------------------ --
--------- ------
------- -
----- ---------- -------
------- --------
------ -------------------------------------------------------------
--
------------ ----------------------
---------- ----------
------- ------
---
------------------上述代码中，我们使用了 resourceDayGrid、resourceTimeGrid 两个插件来创建资源视图。我们还定义了默认的视图为 resourceTimeGridDay，并将资源数据和
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/11248