什么是 angular-ui-calendar?
angular-ui-calendar 是 AngularJS 框架下的一个日历组件，可用于显示和管理事件。该组件基于 jQuery FullCalendar 实现，提供了许多额外功能，例如拖放事件、日历视图切换等。
安装 angular-ui-calendar
使用 npm 安装 angular-ui-calendar：
npm install angular-ui-calendar --save
在 HTML 文件中引入必要的文件:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.css"/> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/fullcalendar.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.6.1/gcal.js"></script> <script src="//rawgit.com/angular-ui/ui-calendar/master/src/calendar.js"></script>
开始使用
首先，我们需要在应用程序中注入 ui.calendar 模块.
angular.module('myApp', ['ui.calendar']);然后，我们可以在 HTML 文件中添加以下代码显示日历：
<div ui-calendar ng-model="eventSources"></div>
接下来，我们可以在控制器中定义事件源。例如，以下代码定义了一个只包含一个事件的事件源：
-- -------------------- ---- -------
-------------------------------------------------- ---------------- -
------------------- - -
-
------- -
-
------ ------ ---
------ ----------------------
---- ---------------------
-
-
-
--
---我们可以通过修改控制器中的 $scope.eventSources 对象添加、删除和更新事件。
拖拽和调整事件
angular-ui-calendar 还支持对事件进行拖拽和调整操作。要启用它们，我们需要在 HTML 文件中添加以下配置：
<div ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>
然后，在控制器中定义 uiConfig.calendar 对象：
-- -------------------- ---- -------
-------------------------------------------------- ---------------- -
--------------- - -
--------- -
--------- -----
---------- -----
---------- --------------- -
-- --------
--
------------ --------------- -
-- --------
-
-
--
---现在，用户就可以使用鼠标拖拽和调整事件了。
日历视图切换
angular-ui-calendar 提供了许多日历视图，例如月视图、周视图和日视图等。我们可以在 HTML 文件中添加以下配置来启用它们：
<div ui-calendar="uiConfig.calendar" ng-model="eventSources" calendar-watch-event="myEvent"></div>
然后，在控制器中定义 uiConfig.calendar 对象：
-- -------------------- ---- -------
-------------------------------------------------- ---------------- ----------- -
--------------- - -
--------- -
--------- -----
------- -
----- -----------------------------
------- --------
------ ------ ----------
--
----------- -------------- -------- -
------------------ - -----------
-
-
--
---现在，用户可以通过点击日历头部的按钮来切换不同的日历视图了。
结论
通过本教程，我们学习了如何使用 npm 包 angular-ui-calendar 在 AngularJS 应用程序中显示和管理事件。我们还学习了如何启用拖拽和调整事件以及切换不同的日
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34781