fullcalendar日历插件使用手册

我是在angularjs框架下使用的，看到下面的代码不要一味照搬，不过差别不大，依葫芦画瓢即可。

引用

//安装angular-ui-calendar插件，目前最新版本是1.0.2，默认该插件依赖的fullcalendar是2.7.1版本，我实际使用的是3.1.0版本，基本上没问题，但如果不使用eventAllow等个别方法，使用2.7.1版本即可。
bower install angular-ui-calendar

...
"dependencies": {
   "angular-ui-calendar": "^1.0.2",
   "fullcalendar": "^3.1.0"
 }

界面展示

功能说明：拖拽左侧节假日到日历控件，一天不允许有两个节假日，可以拖拽添加，可以移动，shift+click表示删除节假日。

html

<div class="row">
    <div class="col-md-3">
        <div id="external-events">
            
节假日
            <div class="fc-event ui-draggable ui-draggable-handle" ng-repeat="holiday in holidaysNameArray" data-color="{{holiday.color}}" style="background-color: {{holiday.color}};">{{holiday.name}}div>
            --
元旦
            <div class="fc-event ui-draggable ui-draggable-handle" data-color="#e35b5a" style="background-color: #e35b5a;">春节div>
            <div class="fc-event ui-draggable ui-draggable-handle" data-color="#257e4a" style="background-color: #257e4a;">My Event 4div>
            <div class="fc-event ui-draggable ui-draggable-handle" data-color="#257e4a" style="background-color: #257e4a;">My Event 5div>-->
        div>
    div>
    <div class="col-md-8 col-md-offset-1">
        <div ui-calendar="uiConfig.calendar" class="calendar" ng-model="eventSources">div>
    div>
div>

javascript代码

$scope.holidaysNameOptions = sessionCache.getHolidayNameGroups();

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

/* alert on eventClick */
$scope.alertOnEventClick = function (date, jsEvent, view) {
    $scope.alertMessage = (date.title + ' was clicked ');
};
$scope.eventAllow = function (dropLocation, draggedEvent) {
    //好像只能即时返回，在promise的结果里返回居然被无视
    /*$log.debug("event alow...");
     $log.debug(dropLocation.start.format('YYYY-MM-DD') + ' ~ ' + dropLocation.end.format());
     $log.debug(draggedEvent);
     var holidays = {"name": event.title, "theDate": dropLocation.start.format('YYYY-MM-DD')};
     HolidaysService.checkExist(holidays).then(function (dto) {
     $log.debug('yes you can drop here');
     return true;
     }, function (msg) {
     $log.debug('exist:'+msg)
     return false;
     });*/
    return true;
};

$scope.eventOverlap = function (stillEvent, movingEvent) {
    //不需判断，只要触发该事件，即表明两个event在同一天相遇
    $log.debug("event overlap...");
    return false;
};

/* alert on Drop */
$scope.alertOnDrop = function (event, delta, revertFunc, jsEvent, ui, view) {
    var newDate = event.start.format("YYYY-MM-DD");
    var oldDate = event.start.clone().add(-1 * delta).format("YYYY-MM-DD");
    var holidays = {"name": event.title, "newDate": newDate, "oldDate": oldDate};
    $log.debug('Event Droped to make dayDelta ' + holidays);
    //移动节假日
    HolidaysService.reqMoveEvent(holidays).then(function (dto) {
        if (dto < 1) {
            growl.addErrorMessage("移动出现错误", {ttl: 2000});
        }
    }, function (msg) {
        growl.addErrorMessage(msg, {ttl: 2000});
    });
};

/* alert on Resize */
$scope.alertOnResize = function (event, delta, revertFunc, jsEvent, ui, view) {
    $scope.alertMessage = ('Event Resized to make dayDelta ' + delta);
};

/* Render Tooltip */
$scope.eventRender = function (event, element, view) {
    element.attr({
        'tooltip': event.title,
        'tooltip-append-to-body': true
    });
    /*var eventId = new Date().getTime() + "" + Math.random();
     if (event.id == null) {
     event.id = eventId;
     event._id = eventId;
     }*/
    //$scope.eventId = event; //只有放到作用域里，ng-click表达式才能取到
    element.attr("ng-click", "$event.eventId = '" + event.id + "'; $event.eventName = '" + event.title + "'; $event.eventDate = '" + event.start.format("YYYY-MM-DD") + "'; remove($event);");
    $compile(element)($scope);
};

//shift + click 表示删除event
$scope.remove = function ($event) {
    if ($event.altKey === false && $event.ctrlKey === false && $event.shiftKey === true && $event.type === "click") {
        var arrayIndex = null;
        //删除节假日
        var holidays = {"name": $event.eventName, "theDate": $event.eventDate};
        HolidaysService.reqRemoveEvent(holidays).then(function (dto) {
            if (dto < 1) {
                growl.addErrorMessage("移除出现错误", {ttl: 2000});
            } else {
                $(calendar).fullCalendar('removeEvents', $event.eventId);
            }
        }, function (msg) {
            growl.addErrorMessage(msg, {ttl: 2000});
        });
    }
};

$scope.dropAccept = function () {
    //$log.debug("drop accept...");
    //触发的太早了
    return true;
}

$scope.onAddEventDrop = function (date, jsEvent, ui, resourceId) {
    //drop 比 eventReceive 先触发，不过还没生成具体的event
    //console.log('drop', date.format("YYYY-MM-DD"));
};

$scope.eventReceive = function (event) {
    var newDate = event.start.format("YYYY-MM-DD");
    var name = event.title;
    var holidays = {"name": name, "theDate": newDate};
    $log.debug('first Event Drag Droped ' + holidays);
    //添加节假日
    HolidaysService.reqAddEvent(holidays).then(function (dto) {
        var id = "FC_" + dto;
        event._id = event.id = id;
        $(calendar).fullCalendar('updateEvent', event);
    }, function (msg) {
        var result = $(calendar).fullCalendar('removeEvents', event);
        $log.debug("remove result: " + result);
        growl.addErrorMessage(msg, {ttl: 2000});
    });
};

/* config object */
$scope.uiConfig = {
    calendar: {
        height: 450,
        editable: true,
        droppable: true, // this allows things to be dropped onto the calendar
        /*locale: "zh-cn",*/
        header: {
            left: 'title',
            center: '',
            right: 'today prev,next'
        },
        buttonText: {
            today: '今天'
        },
        eventLimit: 1,
        events: function (start, end, timezone, callback) {
            var beginDate = start.format("YYYY-MM-DD");
            var endDate = end.format("YYYY-MM-DD");
            HolidaysService.reqList({"beginDate": beginDate, "endDate": endDate}).then(function (dtoList) {
                var eventDtos = [];
                if (dtoList != null && dtoList.length > 0) {
                    dtoList.forEach(function (dto) {
                        var filterHoliday = HOLIDAY_LOCAL.filter(function (item) {
                            if (item.name === dto.name) {
                                return true;
                            }
                        });
                        eventDtos.push({
                            "id": "FC_" + dto.id,
                            "title": dto.name,
                            "start": dto.theDate,
                            "color": filterHoliday[0].color
                        });
                    });
                }
                callback(eventDtos);
            }, function (msg) {
                growl.addErrorMessage(msg, {ttl: 2000});
            });
        },
        displayEventTime: false,
        eventClick: $scope.alertOnEventClick,
        eventAllow: $scope.eventAllow,//好像只能即时返回，在promise的结果里返回居然被无视
        eventOverlap: $scope.eventOverlap, //不需判断，只要触发该事件，即表明两个event在同一天相遇，很好做到不在一天放多个事件
        eventDrop: $scope.alertOnDrop,
        eventResize: $scope.alertOnResize,
        eventRender: $scope.eventRender,
        dropAccept: $scope.dropAccept,
        drop: $scope.onAddEventDrop,
        eventReceive: $scope.eventReceive
    }
};

var HOLIDAY_LOCAL = [
    {"code": "01", "name": "周末", "color": "#257e4a"},
    {"code": "02", "name": "元旦", "color": "#257e4a"},
    {"code": "03", "name": "春节", "color": "#e35b5a"},
    {"code": "04", "name": "元宵节", "color": "#af8c38"},
    {"code": "05", "name": "清明", "color": "#578ebe"},
    {"code": "06", "name": "劳动节", "color": "#8775a7"},
    {"code": "07", "name": "青年节", "color": "#8775a7"},
    {"code": "08", "name": "端午节", "color": "#44b6ae"},
    {"code": "09", "name": "六一儿童节", "color": "#257e4a"},
    {"code": "10", "name": "父亲节", "color": "#e35b5a"},
    {"code": "11", "name": "母亲节", "color": "#e35b5a"},
    {"code": "12", "name": "中共建党节", "color": "#e35b5a"},
    {"code": "13", "name": "八一建军节", "color": "#e35b5a"},
    {"code": "14", "name": "七夕", "color": "#e35b5a"},
    {"code": "15", "name": "教师节", "color": "#af8c38"},
    {"code": "16", "name": "中秋节", "color": "#af8c38"},
    {"code": "17", "name": "国庆节", "color": "#e35b5a"},
    {"code": "18", "name": "重阳节", "color": "#44b6ae"}
];
$scope.holidaysNameOptions.forEach(function (holiday) {
    var filterHoliday = HOLIDAY_LOCAL.filter(function (item) {
        if (item.code === holiday.lookupKey) {
            return true;
        }
    });
    $scope.holidaysNameArray.push({"name": holiday.lookupValue, "color": filterHoliday[0].color});
});

//做适当延时，基本保证在ng-repeat执行后绑定事件
$timeout(
    function () {
        $('#external-events .fc-event').each(function () {
            var eventColor = $(this).data("color");
            // store data so the calendar knows to render an event upon drop
            $(this).data('event', {
                title: $.trim($(this).text()), // use the element's text as the event title
                stick: true, // maintain when user navigates (see docs on the renderEvent method)
                color: eventColor,
                id: null
            });

            // make the event draggable using jQuery UI
            $(this).draggable({
                zIndex: 999,
                revert: true,      // will cause the event to go back to its
                revertDuration: 0  //  original position after the drag
            });
        });
    },
    200
);

https://fullcalendar.io/docs/