日历插件：full-calendar和angular-ui-calendar

full-calendar： https://fullcalendar.io/
angular-ui-calendar gitHub地址： https://github.com/angular-ui/ui-calendar
angular-ui-calendar demo： http://angular-ui.github.io/ui-calendar/

插件使用方法

angular-ui-calendar 其实是对 full-calendar 插件的一个封装，所以依赖于 full-calendar

<link rel="stylesheet" href="bower_components/fullcalendar/dist/fullcalendar.css"/>
<!-- jquery, moment, and angular have to get included before fullcalendar -->
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/moment/min/moment.min.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-calendar/src/calendar.js"></script>
<script type="text/javascript" src="bower_components/fullcalendar/dist/fullcalendar.min.js"></script>
<script type="text/javascript" src="bower_components/fullcalendar/dist/gcal.js"></script>

angular中注入依赖

var app = angular.module('App', ['ui.calendar'])

页面指令：

<div ui-calendar ng-model="eventSources" calendar="week"></div>

controller中的配置：

		$scope.uiConfig = {
                calendar: {
                    height: 'parent',
                    editable: false,
                    header: false,
                    defaultView: 'agendaWeek',
                    slotLabelFormat: "HH:mm",
                    columnFormat: 'ddd MM月DD日',
                    timeFormat: "HH:mm",
                    allDayText: "全天",
                    eventClick: function (calEvent, jsEvent, view) {//日程区块，单击时触发
                        ……
                        return false;
                    }
                }
            };
			$scope.eventSources = [];
            $scope.uiConfig.calendar.dayNamesShort = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
            //本文中未切换full-calendar的语言，因为切换的时候发现中文显示不可控，无法达到预期的效果，所以直接换了显示的内容

本文中未切换full-calendar的语言，因为切换的时候发现中文显示不可控，无法达到预期的效果，所以直接换了显示的内容

calendar中的配置，具体可以查看full-calendar中的文档，full-calendar中的属性可以在uiConfig.calendar中直接使用。
我在使用的时候，常常无法正确的在full-calendar文档中的找到对应的属性，所以建议大家看下这个博客（常用属性都列出了），链接如下：https://blog.csdn.net/lizai22/article/details/53522523

full-calendar语言切换

full-calendar中文的使用：

<script src="../bower_components/fullcalendar/dist/locale-all.js"></script>

引入locale-all.js文件或者引入文件夹locale下面对应的语言文件

建议fullCalendar.js使用3.0以上的版本，要不然在使用中文的时候，页面显示可能会不尽如人意。（版本不需要特别与angular对应）

（这是改了格式后的周日程）

uiCalendarConfig的使用

uiCalendarConfig.calendars.week.fullCalendar() 可以直接调用fullCalendar暴露出来的方法（week是html中calendar对应的名称）
例如：我未使用插件自带的头部，在需要做前后周切换的时候，调用了fullCalendar自己的方法，代码如下：

			$scope.prevWeek = function () {
                $scope.getWeekList(); //获取周列表数据
                uiCalendarConfig.calendars.week.fullCalendar('prev');
            };

            $scope.nextWeek = function () {
                $scope.getWeekList();
                uiCalendarConfig.calendars.week.fullCalendar('next');
            };

            $scope.todayFnc = function () {
                $scope.getWeekList();
                uiCalendarConfig.calendars.week.fullCalendar('today');
            };

数据源的更新

			//属性在angular-ui-calendar的demo中有示列，也可以自己定义属性，事件中的calEvent可以使用自定义属性
			$scope.events = [{start:new Date(),end:……,allDay:true,color:'rgba(109,109,192,0.2)',textColor:'#6D6DC0'}];
			uiCalendarConfig.calendars.week.fullCalendar('removeEvents');
            uiCalendarConfig.calendars.week.fullCalendar('addEventSource', $scope.events);

我在直接更新events的数据时，页面没有做相应的更新，所以参照了网上的办法，先removeEvents，在新增数据源，实际使用是有效的，如果大家有其他的方法，可以提供给我哦。

我在使用full-calendar的时候，是直接看了源代码的，所以可能官方文档是提供了封装好的方法，我直接使用了功能模块实际调用的方法。