介绍
angular2fullcalendar 是基于FullCalendar开源项目的Angular 2 组件。FullCalendar是一个JavaScript事件日历，用于轻松地显示和管理事件。与FullCalendar一样，angular2fullcalendar基于jQuery，momentJS和Underscore.js。
在本教程中，我们将介绍如何在Angular 2项目中使用angular2fullcalendar npm 包。我们将简要介绍angular2fullcalendar的主要特点，并提供一个示例代码，以帮助你开始使用这个npm包。
特点
angular2fullcalendar npm包的主要特点如下：
- FullCalendar API的内联文档。
- TypeScript插件以及样式和事件类型。
- 具有完整选项和事件的双向绑定。
- 自定义视图和编辑窗口。
- 适用于TypeScript的全面测试。
- 完全覆盖不同主题的CSS框架。
安装
首先，你需要确保你已经安装了Node.js和npm. 接下来，进入你的Angular 2项目的根目录，然后运行以下命令：
npm install angular2fullcalendar --save
这将使用npm包管理器安装angular2fullcalendar npm包，并将其添加到你的项目依赖中。
使用
在安装了angular2fullcalendar之后，你需要按照以下步骤来完成配置，从而使用它：
- 引入要使用的组件：
import { CalendarComponent } from 'angular2fullcalendar/src/calendar/calendar';
import { Options } from 'fullcalendar';- 在Angular组件类中，声明一个Options对象来配置CalendarComponent：
public options: Options;
- 在ngOnInit生命周期中初始化options和events数组：
-- -------------------- ---- -------
------ ----------- ---- -
------------ - -
--------- --------
------- -
----- ---------- -------
------- --------
------ ----------------------------
--
------- --
--
-这里我们配置了日历的时区、头部导航栏和三种视图。同时，我们设置了events数组为空，我们将在下一步中添加事件。
- 在events中添加事件数据：
-- -------------------- ---- -------
----------- - -
-
------ ---- --- -------
------ --- ------
--
-
------ ----- -------
------ --- ------------------ ---------------- - ---
---- --- ------------------ ---------------- - --
--
-
------ ---------- -------
------ --- ------------------ ---------------- - ---
---- --- ------------------ ---------------- - ---
------- -----
-
--- 在模板中，添加CalendarComponent作为指令：
<angular2fullcalendar [options]="options" [events]="events"></angular2fullcalendar>
这样我们就完成了angular2fullcalendar的初始化并添加了一些事件数据。
示例
下面是一个完整的Angular组件，其中包含使用angular2fullcalendar npm包的示例代码。
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ----------------- - ---- ---------------------------------------------
------ - ------- - ---- ---------------
------------
--------- -------------
------------ --------------------------
---------- --------------------------
--
------ ----- --------------- ---------- ------ -
------ ------- ------
------ -------- --------
------------- - -
---------- -
----------- - -
-
------ ---- --- -------
------ --- ------
--
-
------ ----- -------
------ --- ------------------ ---------------- - ---
---- --- ------------------ ---------------- - --
--
-
------ ---------- -------
------ --- ------------------ ---------------- - ---
---- --- ------------------ ---------------- - ---
------- -----
-
--
------------ - -
--------- --------
------- -
----- ---------- -------
------- --------
------ ----------------------------
--
------- -----------
--
-
-在这个例子中，我们通过ngOnInit生命周期方法来初始化组件，并设置CalendarComponent的options和events属性。在模板中，我们添加了一个CalendarComponent标签，将options和events属性绑定到组件的属性中。
结论
我们已经学习了如何使用angular2fullcalendar npm包来在Angular 2项目中快速构建一个事件日历。angular2fullcalendar为Angular 2开发人员提供了一个完全选项和事件的双向绑定，同时可以自定义视图和编辑窗口，并附带完整的API文档和TypeScript支持。在日历显示和管理事件方面，它也与FullCalendar相当。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005600a81e8991b448ddd7a