fullcalendar实现拖拽方案到日历中
js代码.
var form;
var planid;
var planname;
var date;
var html = "";
var events = [];
var table;
var delplname;
var deldate;
var delrepeattype;
var index1;
var index2;
var index3;
var interval = [];
var title;
var j = 0;
var showdate = [];
var showtitle = [];
var aaa = "<div style='color: #CCFFFF'><div/>";
var aaa = "<div style='color: #FFCCCC'><div/>";
var aaa = "<div style='color: #99CCCC'><div/>";
var aaa = "<div style='color: #FFCC99'><div/>";
var aaa = "<div style='color: #FF9999'><div/>";
var aaa = "<div style='color: #CC9999'><div/>";
var aaa = "<div style='color: #CCCC99'><div/>";
var aaa = "<div style='color: #CCCCCC'><div/>";
var aaa = "<div style='color: #FF9966'><div/>";
var color = [
'#CCFFFF', '#FFCCCC', '#99CCCC', '#FFCC99', '#FF9999', '#CC9999', '#CCCC99', '#CCCCCC', '#FF9966'
];
layui.use(['form', 'laydate', 'table'], function () {
form = layui.form;
var laydate = layui.laydate;
table = layui.table;
//初始化时间选择
laydate.render({
elem: '#startTime'
, type: 'time'
, format: 'HH:mm'
,change:function(){
//切换时调用
$('.laydate-time-list > li').eq(2).find('li').hide();
}
,ready:function(){
//初始时调用
$('.laydate-time-list > li').eq(2).find('li').hide();
}
});
laydate.render({
elem: '#endTime'
, type: 'time'
, format: 'HH:mm'
,change:function(){
//切换时调用
$('.laydate-time-list > li').eq(2).find('li').hide();
}
,ready:function(){
//初始时调用
$('.laydate-time-list > li').eq(2).find('li').hide();
}
});
//监听提交
window.Initialize = function () {
form.on('submit(save)', function (data) {
/* data.field['id'] = id;*/
data.field.repeattype = $("#repeattype option:selected").val();
data.field.planname = planname;
data.field.date = date;
console.log(interval)
if (planname === '加班') {
//加班，遍历找到原有方案的时间，与所选时间判断，不包含在原有方案时间内方可添加
for (var i = 0; i < interval.length; i++) {
//方案中某班组的开始时间 starttime = interval[i][0]; 结束时间 endtime = interval[i][0];
if (interval[i][0] < interval[i][1]) {
//班组时间范围正常 开始时间小于结束时间
if ($("#startTime").val() < $("#endTime").val()) {
//所选时间范围 正常 开始时间小于结束时间
if ($("#endTime").val() < interval[i][0] || $("#startTime").val() >= interval[i][1]) {
//console.log("可用范围，执行保存");
} else {
layer.alert("加班事件与已有方案时间重复，保存失败");
return false;
}
} else {
//所选时间范围 跨天 开始时间小于结束时间
if ($("#endTime").val() < interval[i][0] && $("#startTime").val() >= interval[i][1]) {
//console.log("可用范围，执行保存");
} else {
layer.alert("加班事件与已有方案时间重复，保存失败");
return false;
}
}
} else {
//班组时间范围跨天 开始时间大于结束时间
if ($("#startTime").val() < $("#endTime").val()) {
//所选时间范围 正常 开始时间小于结束时间
if ($("#endTime").val() < interval[i][0] && $("#startTime").val() >= interval[i][1]) {
//console.log("可用范围，执行保存");
} else {
layer.alert("加班事件与已有方案时间重复，保存失败");
return false;
}
} else {
//所选时间范围 跨天 开始时间大于结束时间
layer.alert("加班事件与已有方案时间重复，保存失败");
return false;
}
}
}
save(data.field);
} else{
//方案名不为加班，说明是添加方案
save(data.field);
}
$("#repeattype").val("");
$("#team").val("");
$("#startTime").val("");
$("#endTime").val("");
events = [];
$('#calendar').fullCalendar('removeEventSource', events);
$('#calendar').fullCalendar('addEventSource', events);
$('#calendar').fullCalendar('refetchEvents');
return false;
});
}
Initialize();
form.on('submit(del)', function () {
if (new Date(deldate) < new Date()) {
layer.alert("过期日期方案排班不可删除");
} else {
if (delrepeattype == "单次") {
layer.confirm("请选择删除方案的作用范围", {btn: ['单次'], title: "提示"}, function () {
delrepeattype = "单次";
//layer.close(index2);
layer.close(index1);
vm.deleteItems();
});
} else {
layer.confirm("请选择删除方案的作用范围", {btn: ['单次', delrepeattype], title: "提示"}, function () {
delrepeattype = "单次";
//layer.close(index2);
layer.close(index1);
vm.deleteItems();
}, function () {
delrepeattype = delrepeattype;
//layer.close(index2);
layer.close(index1);
vm.deleteItems();
});
}
}
return false;
});
/*table.on('tool(bug-table)', function (obj) {
var data = obj.data;
console.log(data);
if (obj.event === 'del') {
layer.confirm('请确认删除操作', function (index) {
vm.deleteItems(data.id);
layer.close(index);
});
}
});*/
});
var i = 0;
$(document).ready(function () {
/*查询方案,加载方案,生成能拖拽的方案模块*/
$.ajax({
type: "POST",
url: siteurl + '/mes/plan/searchAllPlanName',
data: JSON.stringify({}),
async: false,
dataType: 'json',
contentType: 'application/json;charset=UTF-8',
success: function (r) {
$.each(r.searchLists, function (key, val) {
if (i == 10) {
i = 0;
}
html += "<div class='fc-event' style='color:#000000;background-color: " + color[i] + ";border-color:" + color[i] + "' name='" + val.planname + "' id='" + val.planid + "'>" + val.planname + ":<br/>";
i++;
//根据每一个方案id查出对应的班组及时间
$.ajax({
type: "POST",
url: siteurl + '/mes/plan/searchTeamName',
data: JSON.stringify({'planid': val.planid}),
async: false,
dataType: 'json',
contentType: 'application/json;charset=UTF-8',
success: function (r) {
$.each(r.teamLists, function (teamkey, teamval) {
html += teamval.team + "(" + teamval.starttime + "-" + teamval.endtime + ")<br/> ";
});
html += "</div>";
}
});
/* html += "<div class='fc-event' id='" + val.planid + "'>" + val.planname + ":<br/></div>";*/
});
$('#external-events').append(html);
}
});
/* initialize the external events*/
$('#external-events .fc-event').each(function () {
// 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)
});*/
// 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
});
});
/* initialize the calendar */
$('#calendar').fullCalendar({
header: {
left: '',
center: 'title',
right: 'prev,next today'
},
firstDay: 5,
editable: true,
eventLimit: true,
droppable: true, // this allows things to be dropped onto the calendar
drop: function (event, dayDelta, minuteDelta, allDay) {
var date_value = new Date(event._d);
date = date_value.getFullYear() + '-' + ('00' + (date_value.getMonth() + 1)).slice(-2) + '-' + ('00' + (date_value.getDate())).slice(-2);
if (minuteDelta.helper[0].innerHTML == '加班') {
//弹出选择加班时长范围的弹窗
//根据日期查找当天方案 再根据方案查找方案班组时间
//$('#planname').val(planname);
//console.log(date);
if (event._d < new Date()) {//所选时间小于当前时间，不可以生成方案
layer.alert("过期日期不可生成方案排班");
}
else {
planname = '加班'
vm2.selelctTeamPlanName(date);
index2 = layer.open({
type: 1,
title: '加班',
area: ['350px', '380px'],
content: $('#overtime')
});
Initialize();
form.render();
}
} else {
var planstr = minuteDelta.helper[0].innerHTML;
planname = planstr.substr(0, planstr.indexOf(':'));
//获取到所拖拽的方案的id
planid = minuteDelta.helper[0].id;
if (event._d < new Date()) {//所选时间小于当前时间，不可以生成方案
layer.alert("过期日期不可生成方案排班");
}
else {
//弹出选择作用范围的弹窗
$('#planname').val(planname);
index3 = layer.open({
type: 1,
title: '排班',
area: ['380px', '320px'],
content: $('#jump')
});
form.render();
}
}
},
eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
//alert(dayDelta);
//console.log(event);
},
editable: false, //不允许拖动
events: function (start, end, timezone, callback) {
events = [];
vm.getEventList(callback);
vm.getWorkOverList(callback);
},
eventRender: function (event, element) {//title以HTML显示（换行）
element.html(event.title);
},
eventClick: function (event, jsEvent, view) {
//日期
//点击查看详情时的日期和方案名
var curdate = event.start._i;
var curplname = event.title.substr(0, event.title.indexOf(':'));
delplname = curplname;
deldate = curdate;
//方案名
//console.log(plname);
//根据方案名和日期查找所有事件
vm.getAllEventList(curplname, curdate);
}
});
});
function save(data) {
$.ajax({
type: "POST",
url: siteurl + '/mes/productcalendar/save',
data: JSON.stringify(data),
async: false,
dataType: 'json',
contentType: 'application/json;charset=UTF-8',
success: function (r) {
if (r.code === 0) {
layer.close(index2);
layer.close(index3);
layer.msg("操作成功");
}
}
});
}
var vm = new Vue({
el: '#main',
data: {
detailShow: {},
itemList: [],
},
methods: {
stopPro: function (e) {
e.stopPropagation();
},
doAjax: function (url, data, callback) {
$.ajax({
type: "POST",
url: url,
data: JSON.stringify(data),
async: false,
dataType: "json",
contentType: 'application/json;charset=UTF-8',
success: callback
})
},
getEventList: function (callback) {
$.ajax({
type: "POST",
url: siteurl + '/mes/productcalendar/getEventList',
data: JSON.stringify({}),
async: false,
dataType: 'json',
contentType: 'application/json;charset=UTF-8',
success: function (r) { // 获取当前月的数据
// r2.mesCalendarScheduleEntities[i].planname + ":<br/>"+
//debugger;
showdate = [];
showtitle = [];
j = 0;
for (var i = 0; i < r.mesCalendarScheduleEntities.length; i++) {
if(i<1){
title = r.mesCalendarScheduleEntities[i].team + " " + r.mesCalendarScheduleEntities[i].eventtype + " (" +
r.mesCalendarScheduleEntities[i].starttime + "-" + r.mesCalendarScheduleEntities[i].endtime + ")<br/>"
showdate.push(r.mesCalendarScheduleEntities[i].date);
}else{
if (r.mesCalendarScheduleEntities[i].date == r.mesCalendarScheduleEntities[i-1].date) {
//如果和前一天时间相同，则只加title
title += r.mesCalendarScheduleEntities[i].team + " " + r.mesCalendarScheduleEntities[i].eventtype + " (" +
r.mesCalendarScheduleEntities[i].starttime + "-" + r.mesCalendarScheduleEntities[i].endtime + ")<br/>"
if(showtitle.length>j){
showtitle.pop();
}
} else {
//如果和前一天时间不同 存时间数据,title清空
showdate.push(r.mesCalendarScheduleEntities[i].date);
title = r.mesCalendarScheduleEntities[i].team + " " + r.mesCalendarScheduleEntities[i].eventtype + " (" +
r.mesCalendarScheduleEntities[i].starttime + "-" + r.mesCalendarScheduleEntities[i].endtime + ")<br/>"
j++;
}
showtitle.push(r.mesCalendarScheduleEntities[i].planname + ":<br/>"+title);
}
}
//console.log(showdate);
//console.log(showtitle);
for(var k=0;k<showdate.length;k++){
var pname = showtitle[k].substr(0,showtitle[k].indexOf(":"));
events.push({
title: showtitle[k],
start: showdate[k], // will be parsed
color: $("div[name='" + pname + "']").css("background-color"),
textColor: '#000000'
});
}
// console.log(data);
/*$.each(r2.mesCalendarScheduleEntities), function (key, val) {
events.push({
title: val.title,
start: val.date, // will be parsed
color: '#FFCC99',
textColor: '#000000'
});
});*/
callback(events);
}
});
},
getWorkOverList: function (callback) {
$.ajax({
type: "POST",
url: siteurl + '/mes/productcalendar/getWorkOverList',
data: JSON.stringify({}),
async: false,
dataType: 'json',
contentType: 'application/json;charset=UTF-8',
success: function (r) { // 获取当前月的数据
$.each(r.mesCalendarScheduleEntities, function (key, val) {
events.push({
title: val.eventtype + ":<br/>" + val.team + "(" + val.starttime + "-" + val.endtime + ")",
start: val.date, // will be parsed
color: '#FFFFCC',
textColor: '#000000'
});
});
callback(events);
}
});
},
getAllEventList: function (planname, date) {
$.ajax({
type: "POST",
url: siteurl + '/mes/productcalendar/getAllEventList',
data: JSON.stringify({'planname': planname, 'date': date}),
async: false,
dataType: 'json',
contentType: 'application/json;charset=UTF-8',
success: function (r) { // 获取当前月的数据
delrepeattype = r.mesCalendarScheduleEntities[0].repeattype;
vm.itemList = r.mesCalendarScheduleEntities;
vm.initTable();
index1 = layer.open({
type: 1,
title: '事件详细信息',
area: ['550px'],
content: $('#info')
});
form.render();
}
});
},
initTable: function () {
table.render({
elem: '#bug-table'
, id: 'idTest'
, data: vm.itemList
, cols: [[
{type: 'numbers', title: '编号', event: 'colClick'}
, {
field: 'eventname',
width: 100,
title: '事件名称',
sort: true,
style: 'cursor: pointer;',
event: 'colClick',
align: 'center'
}
, {
field: 'eventtype',
width: 100,
title: '事件类型',
sort: true,
style: 'cursor: pointer;',
event: 'colClick',
align: 'center'
}, {
field: 'team',
width: 100,
title: '班组名称',
style: 'cursor: pointer;',
event: 'colClick',
align: 'center'
}
, {
field: 'starttime',
sort: true,
width: 100,
title: '开始时间',
style: 'cursor: pointer;',
event: 'colClick',
align: 'center'
}
, {
field: 'endtime',
sort: true,
width: 100,
title: '结束时间',
style: 'cursor: pointer;',
event: 'colClick',
align: 'center'
}
]]
, page: false
});
},
deleteItems: function () {
$.ajax({
type: "POST",
url: siteurl + '/mes/productcalendar/deleteTeamPlan',
data: JSON.stringify({
'planname': delplname,
'date': deldate,
'repeattype': delrepeattype
}),
async: false,
dataType: "json",
contentType: 'application/json;charset=UTF-8',
success: function (r) {
layer.alert("删除成功");
events = [];
$('#calendar').fullCalendar('removeEventSource', events);
$('#calendar').fullCalendar('addEventSource', events);
$('#calendar').fullCalendar('refetchEvents');
//parent.layer.close(parent.layer.index);
}
});
}
}
});
var vm2 = new Vue({
el: '#main2',
data: {
detailShow: {}
},
methods: {
selelctTeamPlanName: function (date) {
$.ajax({
type: "POST",
url: siteurl + '/mes/productcalendar/getTeamPlanName',
data: JSON.stringify({'date': date}),
async: true,
dataType: 'json',
contentType: 'application/json;charset=UTF-8',
success: function (r) {
if(r.mesCalendarScheduleEntities.length !== 0){
interval = [];
$.each(r.mesCalendarScheduleEntities, function (key, val) {
interval.push([val.starttime, val.endtime]);
});
}else{
interval = [];
}
}
});
}
}
});
代码奉上，写完好久了，注释的不是很全，后面有时间再补吧。。。。我自己看都觉得有点混乱。。。。
2356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
