我是在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 titlestick: 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 itsrevertDuration: 0  //  original position after the drag});});},200
);

https://fullcalendar.io/docs/

fullcalendar日历插件使用手册相关推荐

FullCalendar 二：FullCalendar日历插件说明文档
FullCalendar提供了丰富的属性设置和方法调用,开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发,本文将FullCalendar的常用属性和方法.回调函数等整理成中 ...
java显示日历插件_JavaWeb项目FullCalendar日历插件使用的示例代码
本文介绍了JavaWeb项目FullCalendar日历插件使用的示例代码,分享给大家,具体如下: 使用FullCalendar需要引用的文件 1.css文件 2.js文件生成日历主界面 FullC ...
Sep 15 FullCalendar日历插件说明文档
Sep 15 FullCalendar日历插件说明文档 helloweba.com 作者:月光光时间:2013-09-15 13:53 标签: FullCalendar 日历文档 FullCa ...
fullcalendar日历插件的使用并实现增删改查
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
fullcalendar日历插件的使用并动态增删改查
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
fullcalendar日历插件的使用并动态增删改查(转载)
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fu ...
FullCalendar 日历插件排班表排课表保姆级详解(可拖动排班排课)
(基于vue)实现效果文章目录前言一.FullCalendar是什么? 二.使用步骤 1.引入库 2.html部分代码 3.css样式代码(样式我单独写个scss文件引入的) 4.逻辑代码部分 ...
fullcalendar php,php使用fullcalendar日历插件详解，fullcalendar日历
php使用fullcalendar日历插件详解,fullcalendar日历最近做课程表的项目,找了好多个插件感觉都不好用,无意间看到了fullcalendar,还挺简单的,很方便,先贴一张项目页面 ...
vue中使用FullCalendar日历插件
文章目录前言一.FullCalendar兼容二.使用步骤 1.引入库 2.载入使用总结前言因为要实现一个类似任务日历的功能,于是翻看了vue创造的日历组件发现不能符合要求的,所以又找了几个 ...

fullcalendar日历插件使用手册

引用

界面展示

html

javascript代码

fullcalendar日历插件使用手册相关推荐

最新文章

热门文章