angular中ui calendar怎么用

Angular-UI Calendar是一个方便和易于使用的日历控件，用于在AngularJS应用程序中显示和管理事件和日程。UI Calendar是基于jQuery FullCalendar开发的，提供了各种功能来方便用户操作，比如像月视图、周视图、日视图和列表视图等。

以下是使用Angular-UI Calendar的步骤：

1. 安装Angular-UI Calendar

首先，需要安装Angular-UI Calendar。可以通过Bower来进行安装，运行如下命令：

bower install angular-ui-calendar

2. 引入必要的CSS和JavaScript文件

在HTML文件中，需要引入必要的CSS和JavaScript文件，如下所示：

<link href='bower_components/fullcalendar/dist/fullcalendar.css' rel='stylesheet' />
<script src='bower_components/jquery/dist/jquery.min.js'></script>
<script src='bower_components/moment/min/moment.min.js'></script>
<script src='bower_components/fullcalendar/dist/fullcalendar.min.js'></script>
<script src='bower_components/angular/angular.min.js'></script>
<script src='bower_components/angular-ui-calendar/src/calendar.js'></script>

3. 设置视图

Angular-UI Calendar提供了四种视图，分别是月视图、周视图、日视图和列表视图。可以使用以下代码块设置视图：

<div ui-calendar="uiConfig.calendar" ng-model="eventSources" calendar="myCalendar"></div>

4. 设置配置

要修改日历的设置，可以使用以下代码块：

$scope.uiConfig = {
   calendar:{
     height: 450,
     editable: true,
     header:{
       left: 'month basicWeek basicDay agendaWeek agendaDay',
       center: 'title',
       right: 'today prev,next'
     },
     dayClick: $scope.alertEventOnClick,
     eventDrop: $scope.alertOnDrop,
     eventResize: $scope.alertOnResize
   }
 };

auModel: 模型数据

在这个例子中，ui-calendar是一个自定义指令，ng-model指定事件和日期源，uiConfig包含设置项。

在设置中，可以修改日历的高度、可编辑性、标题栏、日点击事件、事件拖动事件和事件调整大小事件等参数。

5. 设置事件

可以添加一些事件，例如，单击事件、拖动事件和大小调整事件等。可以在uiConfig.calendar中设置，如下所示：

$scope.alertOnEventClick = function(date, jsEvent, view){
     alert('Date: ' + date.start._d);
 };

$scope.alertOnDrop = function(event, delta, revertFunc, jsEvent, ui, view){
     alert('Drop!');
 };

$scope.alertOnResize = function(event, delta, revertFunc, jsEvent, ui, view){
     alert('Resize!');
 };

6. 添加事件源

最后，需要添加事件源。可以从本地或远程源加载事件信息。如下所示：

$scope.eventSources = [
  {
    events: [
      {
        title: 'My Event',
        start: '2017-05-16',
        end: '2017-05-17'
      }
    ],
    color: 'yellow',   // an option!
    textColor: 'black' // an option!
  }
];

完成这些基本步骤后，就可以在应用程序中使用Angular-UI Calendar，来直观地管理和显示日历事件了。