前言
随着互联网技术的快速发展，现代化企业的业务流程越来越依赖于轻量级CMS系统。而专业的日历组件可以极大地提升企业的日程安排效率。而 sq-angular2-fullcalendar 就是 Angular 2 应用中非常强大的一种组件。
作为一个前端工程师，掌握 sq-angular2-fullcalendar 使用技巧，对我们日后的职业发展将是非常有益的。本篇文章将详细介绍 sq-angular2-fullcalendar 的使用方法。
安装
安装 sq-angular2-fullcalendar 非常简单，只需要在 npm 中输入以下命令即可：
npm install sq-angular2-fullcalendar --save
快速上手
引入模块
在使用 sq-angular2-fullcalendar 之前，我们需要确保已经通过 npm 安装了所需依赖项。进入你的 Angular 2 项目，到 app.module.ts 文件中添加以下代码：
-- -------------------- ---- -------
------ - ---------------- - ---- ---------------------------
-----------
-------- -
--------------
--------------------------
--
------------- - ------------ --
---------- - ------------ -
--添加 HTML 代码
我们可以在 HTML 页面上很容易的引用 sq-angular2-fullcalendar。创建一个含有你的日历组件的父容器，并设置其高度和宽度。接下来将以下代码添加至父容器内：
<ng-fullcalendar [options]="options" (eventClick)="eventClick($event.detail)" (clickButton)="clickButton($event.detail)"></ng-fullcalendar>
以上代码定义了 sq-angular2-fullcalendar 组件，并通过 options、eventClick 和 clickButton 三个选项设置其行为和外观。
初始化组件
在 Angular 组件里面我们可以通过以下方法对 sq-angular2-fullcalendar 进行初始化：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------- - ---- ---------------
------------
--------- ---------
------------ ----------------------
--
------ ----- ------------ ---------- -------
-------- --------
---------- -
------------ - -
--------- ------
----------- -----
------- -
----- ---------- -------
------- --------
------ --------------------------------------
--
------- -
-
------ ---------
------ ------------
--
-
------ ---------
------ -------------
---- ------------
-
-
--
-
-在以上代码中，我们设置了 editable 和 eventLimit 两个选项，以及设置了 header 元素的位置。其中 events 元素定义了我们需要在日历上展示的事件，本例中为 Event1 和 Event2。
到此，我们就可以使用 sq-angular2-fullcalendar 了。
附带实例代码
完整的 Angular 2 代码可在以下 GitHub 仓库中下载：
git clone https://github.com/square/ng-fullcalendar-example.git cd ng-fullcalendar-example npm install ng serve
小结
本文详细介绍了 sq-angular2-fullcalendar 的使用方法及其实现原理，帮助读者快速上手该组件，并在实际项目开发中灵活使用。从本质上讲，掌握好 sq-angular2-fullcalendar 组件对我们提高工作效率，推进项目开发必将大有裨益。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f0d9381d61a3540d6c