fullcalendar实现拖拽方案到日历中--js

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 = "
";
var aaa = "
";
var aaa = "
";
var aaa = "
";
var aaa = "
";
var aaa = "
";
var aaa = "
";
var aaa = "
";
var aaa = "
";
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 += "
" + val.planname + ":
";
                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 + ")
 ";
                        });
                        html += "
";
}
});
/* html += "
" + val.planname + ":
";*/
});
$('#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 + ":
"+
//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 + ")
"
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 + ")
"
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 + ")
"
j++;
}
showtitle.push(r.mesCalendarScheduleEntities[i].planname + ":
"+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 + ":
" + 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 = [];
}
}
});
}
}
});

代码奉上，写完好久了，注释的不是很全，后面有时间再补吧。。。。我自己看都觉得有点混乱。。。。