我是在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">
            <h4>節假日</h4>
            <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="#257e4a" style="background-color: #257e4a;">元旦</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 4</div>
            <div class="fc-event ui-draggable ui-draggable-handle" data-color="#257e4a" style="background-color: #257e4a;">My Event 5</div>-->
        </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
);