分享一下FullCalendar日历效果
动态新增排班数据
查看看所有的排班信息
addShiftManage.html
在这里插入代码片
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<th:block th:include="zdxtInclude :: header('新增排班')"/>
<link th:href="@{/ajax/libs/fullcalendar/core/main.css}" rel='stylesheet' />
<link th:href='@{/ajax/libs/fullcalendar/daygrid/main.css}' rel='stylesheet' />
<link th:href='@{/ajax/libs/fullcalendar/timegrid/main.css}' rel='stylesheet' />
<link th:href='@{/ajax/libs/fullcalendar/timeline/main.css}' rel='stylesheet' />
<link th:href='@{/ajax/libs/fullcalendar/resource-timeline/main.css}' rel='stylesheet' />
<link th:href='@{/project/duty/css/shiftDutyManage/shiftDutyManage.css}' rel='stylesheet' />
<th:block th:include=" zdxtInclude :: footer"/>
<script th:src="@{/ajax/libs/fullcalendar/lunar.js}"></script>
<script th:src='@{/ajax/libs/fullcalendar/core/main.js}'></script>
<script th:src='@{/ajax/libs/fullcalendar/interaction/main.js}'></script>
<script th:src='@{/ajax/libs/fullcalendar/daygrid/main.js}'></script>
<script th:src='@{/ajax/libs/fullcalendar/timegrid/main.js}'></script>
<script th:src='@{/ajax/libs/fullcalendar/timeline/main.js}'></script>
<script th:src='@{/ajax/libs/fullcalendar/resource-common/main.js}'></script>
<script th:src='@{/ajax/libs/fullcalendar/resource-timeline/main.js}'></script>
<script th:src='@{/ajax/libs/fullcalendar/core/locales/zh-cn.js}'></script>
<script th:src='@{/project/duty/js/shiftDutyManage/addDutyManage.js}'></script>
</head>
<body>
<div id="add_popup" class="popup_menu app-menu">
<ul id="duty-li">
</ul>
</div>
<div class="form-group" >
<label class="control-label">排班标题:</label>
<div class="col-sm-2">
<input name="title" id="title" class="form-control" type="text" />
</div>
</div>
<div class="fc-toolbar duty-time"><div>
</div>
</div>
<div id='calendar'></div>
<script>
$addDutyManage.loadData();
/**
* 去掉浏览器右击事件
*/
document.oncontextmenu = function(){
return false;
}
/**
* 日期格式化
*/
function formatDate(date) {
var date = new Date(date);
var YY = date.getFullYear() + '-';
var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
return YY + MM + DD ;
}
/**
* 每个人每天只能存在一个日程,
* 如果在选择日程覆盖之前选中的日程(去重)
* @param arr
* @returns {*}
*/
function unique(arr){
for(var i=0; i<arr.length; i++){
for(var j=i+1; j<arr.length; j++){
if(formatDate(arr[i].start)==formatDate(arr[j].start)){ //第一个等同于第二个,splice方法删除第二个
arr.splice(i,1);
j--;
}
}
}
return arr;
}
/**
* 点击保存提交日程
*/
function submitHandler(){
var dutyArrangeClassData=[];
var events=$addDutyManage.calendar.getEvents();
$.each(events,function(i,obj){
var data=obj._def.extendedProps;
dutyArrangeClassData.push(data);
})
var title=$("#title").val();
if(title==null || title==""){
$.modal.alert("请输入标题")
}else {
$.ajax({
type: 'post',
dataType: 'json',
url: $addDutyManage.dutyData + "/add?title=" + title,
data: JSON.stringify(dutyArrangeClassData),
contentType: "application/json",
success: function (result) {
$.operate.successCallback(result);
},
error: function (data) {
$.modal.alert("操作异常");
}
});
}
}
</script>
</body>
</html>
addDutyManage.js
在这里插入代码片
var $addDutyManage={
prefix : ctx + "duty/classRole",
prefixDetail : ctx + "duty/classesDetail",
dutyData : ctx +"duty/shiftManage",
dutyDictItemPrefix: ctx + "project/duty/basDutyDictItem",
isAddPopupShow : false,
resources:[],
calendar:"",
/**
* 展示日历日程控件
*/
loadData:function () {
$addDutyManage.loadDataAddEvent();
$addDutyManage.dutyClassRole();
},
/**
* 展示日历日程控件--值班人员只显示自己的
*/
myLoadData:function () {
$addDutyManage.loadDataAddEvent();
$addDutyManage.myDutyClassRole();
},
/**
* 展示日历日程控件添加事件
*/
loadDataAddEvent: function () {
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
$addDutyManage.loadDutyLi(false,"","","","","");
$addDutyManage.calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'resourceTimeline' ],
selectable: true,
locale:'zh-cn',
defaultView: 'resourceTimelineWeek',
views: {
resourceTimelineWeek: {
type: 'resourceTimeline',
duration: { days: 14 },
buttonText: '日期',
slotDuration: '24:00',
}
},
header: {
left: '',
center: 'title',
right: 'today prev,next',
},
resourceLabelText: '姓名',
resourceGroupField: 'building',
resourceOrder: '-building',
resources: $addDutyManage.resources,
dateClick: function(arg) {
var resourceId=arg.resource.id;
/*值班角色编号*/
var dutyRoleId=arg.resource.extendedProps.dutyRoleId;
/*值班角色名称*/
var dutyRoleName=arg.resource.extendedProps.dutyRoleName;
/*值班人姓名*/
var dutyPerson=arg.resource.extendedProps.dutyPerson;
var festivalTime=formatDate(arg.date);
if(arg.jsEvent.button==2){
$('#add_popup').show();
$("#add_popup").css({
top: arg.jsEvent.clientY,
left: arg.jsEvent.clientX
});
$addDutyManage.loadDutyLi(true,resourceId,festivalTime,dutyRoleId,dutyRoleName,dutyPerson);
}
},
eventClick: function(arg) {
if(arg.jsEvent.button==2){
$('#add_popup').show();
$("#add_popup").css({
top: arg.jsEvent.clientY,
left: arg.jsEvent.clientX
});
$addDutyManage.loadDutyInfo(arg);
}
},
});
$addDutyManage.calendar.render();
});
},
/**
* 点击eventClick加载班次信息
*/
loadDutyInfo:function(arg){
var html="";
_this=arg;
$.ajax({
type:"POST",
url:$addDutyManage.prefixDetail+"/selectDutyClassesDetailList",
success:function(res){
var html=""
$.each(res, function (i,obj) {
html+=' <li><a οnclick="$addDutyManage.submitTags(_this,\''+obj.guid+'\',\''+obj.classesName+'\',\''+obj.classesColor+'\',)">' + obj.classesName + '</a></li>';
})
var id=arg.event.id;
html += ' <li><a οnclick="$addDutyManage.btnDelete(\''+id+'\')">删除</a></li>'
$("#duty-li").html(html)
}
})
},
/**
* 点击dateClick加载班次信息
*/
loadDutyLi:function(isLi,resourceId,festivalTime,dutyRoleId,dutyRoleName,dutyPerson){
var result={
"resourceId":resourceId,
"festivalTime":festivalTime,
"dutyRoleId":dutyRoleId,
"dutyRoleName":dutyRoleName,
"dutyPerson":dutyPerson
}
_this=result;
var html="";
$.ajax({
type:"POST",
url:$addDutyManage.prefixDetail+"/selectDutyClassesDetailList",
success:function(res){
$.each(res, function (i,obj) {
if(isLi) {
html+=' <li><a οnclick="$addDutyManage.submitTag(_this,\''+obj.guid+'\',\''+obj.classesName+'\',\''+obj.classesColor+'\',)">' + obj.classesName + '</a></li>';
}else{
$(".duty-time div").append('<span><i style="background: '+obj.classesColor+'"></i>'+obj.classesName+':</span> <span>'+obj.beginTime+'</span><span>-</span><span>'+obj.endTime+'</span>');
}
})
if(isLi) {
var id=dutyRoleId+festivalTime;
html += ' <li><a οnclick="$addDutyManage.btnDelete(\''+id+'\')">删除</a></li>'
$("#duty-li").html(html)
}
}
})
},
/**
* 加载值班角色
*/
dutyClassRole:function(){
$.ajax({
type:"POST",
url:$addDutyManage.prefix+"/list",
async:false,
success:function(res){
$.each(res.rows, function (i,obj) {
var postName="";
if(obj.postList!=null && obj.postList!=""){
postName="("+obj.postList[0].postName+")"
}
$addDutyManage.resources.push({ id: obj.guid,
building:$addDutyManage.getEveDutyItemType(obj.dutyPosition),
title: obj.dutyName+postName,dutyRoleId: obj.guid,
dutyRoleName:obj.dutyPosition,
dutyPerson:obj.dutyName});
})
return $addDutyManage.resources;
}
})
},
/**
* 加载我的值班角色
*/
myDutyClassRole:function(){
$.ajax({
type:"POST",
url:$addDutyManage.prefix+"/selectMyDutyClassRoleList",
async:false,
success:function(res){
$.each(res, function (i,obj) {
$addDutyManage.resources.push({ id: obj.guid,
building:$addDutyManage.getEveDutyItemType(obj.dutyPosition),
title: obj.dutyName,dutyRoleId: obj.guid,
dutyRoleName:obj.dutyPosition,
dutyPerson:obj.dutyName});
})
return $addDutyManage.resources;
}
})
},
/**
* 动态添加日程(如:白班,晚班)dateClick
*/
submitTag:function(result,guid,classesName,classesColor){
var id=result.dutyRoleId+result.festivalTime;
//删除相同时间同一个人的信息
var event =$addDutyManage.calendar.getEventById(id)
if(event!=null){
event.remove()
}
//添加事件
$addDutyManage.calendar.addEvent({
id:id,
groupId:result.resourceId,
resourceId: result.dutyRoleId,
start: result.festivalTime,
title:classesName,
dutyRoleId:result.dutyRoleId,
dutyDate:formatDate(result.festivalTime),
classesName:guid,
backgroundColor:classesColor,
borderColor:classesColor,});
$('#add_popup').hide()
},
/**
* eventClick删除原来的日程添加新日程
*/
submitTags:function(result,guid,classesName,classesColor) {
//删除相同时间同一个人的信息
var event =$addDutyManage.calendar.getEventById(result.event.id);
if(event!=null){
event.remove()
}
//添加事件
$addDutyManage.calendar.addEvent({
id:result.event.id,
groupId:result.event.groupId,
resourceId:result.event.extendedProps.dutyRoleId,
start:formatDate(result.event.start),
title:classesName,
dutyRoleId:result.event.extendedProps.dutyRoleId,
dutyDate:formatDate(result.event.start),
classesName:guid,
backgroundColor:classesColor,
borderColor:classesColor,});
$('#add_popup').hide()
},
btnDelete:function(id){
var event =$addDutyManage.calendar.getEventById(id);
if(event!=null){
event.remove()
}
$('#add_popup').hide()
},
getEveDutyItemType:function (value) {
var res="";
var config = {
url: this.dutyDictItemPrefix + "/getItemListByDataDictValue/dutyposition",
type: "get",
dataType: "json",
data: {},
async:false, //同步
success: function(result){
for (var i = 0; i <result.length ; i++) {
if(value == result[i].paramId){
res= result[i].paramValue
}
}
}
};
$.ajax(config);
return res;
},
}
官网地址
https://fullcalendar.io/
百度网盘
链接: https://pan.baidu.com/s/1doeNF4G-feYVTa5Oy8zYsA 提取码: 4eup