fullcalendar+ajax+.net制作日程web版

  神啊，我的头发还能存活多久？？？

  

近些日子又有了新的工作，日程管理，虽然之前用过Ext.Net做过（方法特简单），但经理一句话“不要用之前做的，自己再写出来一个”又让我忙活三天

网上搜索资料，都是php、java、要么就是没有demo，让我们.net怎么活下去。。。

话不多说，先上图：

 

日程列表：

添加日程：

修改日程：

移动日程1：

移动日程2：

删除日程：

 

样式借鉴之前下载的java项目，望之前的博主见谅。。。

 

主要代码

 

jquery代码：

$('#calendar').fullCalendar({
                //设置月视图、日视图、时间视图
                plugins: ['interaction', 'dayGrid', 'timeGrid', 'list'],
                //设置头部信息，如果不想显示，可以设置header为false
                header: {
                    //日历头部左边：初始化切换按钮
                    left: 'month,agendaWeek,agendaDay,listWeek',
                    //日历头部中间：显示当前日期信息
                    center: 'title',
                    //日历头部右边：初始化视图
                    right: 'prev,next today'
                },
                //设置下一天开始的时间
                nextDayThreshold: '08:00:00',
                //中文语言
                locale: 'zh-cn',
                //高度
                height: 'parent',
                //月视图下日历格子宽度和高度的比例
                aspectRatio: 1.35,
                //月视图的显示模式，fixed：固定显示6周高；liquid：高度随周数变化；variable: 高度固定
                weekMode: 'liquid',
                //初始化时的默认视图，month、agendaWeek、agendaDay
                defaultView: 'month',
                //agenda视图下是否显示all-day
                allDaySlot: true,
                //agenda视图下all-day的显示文本
                allDayText: '全天',
                //agenda视图下两个相邻时间之间的间隔
                slotMinutes: 30,
                //区分工作时间
                businessHours: true,
                //非all-day时，如果没有指定结束时间，默认执行120分钟
                defaultEventMinutes: 60,
                //设置为true时，如果数据过多超过日历格子显示的高度时，多出去的数据不会将格子挤开，而是显示为 +...more ，点击后才会完整显示所有的数据
                eventLimit: true,
                //设置是否显示周六和周日，设为false则不显示
                weekends: true,
                //日历初始化时显示的日期，月视图显示该月，周视图显示该周，日视图显示该天，和当前日期没有关系
                //defaultDate: '2016-08-11',
                //设置是否可被单击或者拖动选择
                selectable: true,
                //点击或者拖动选择时，是否显示时间范围的提示信息，该属性只在agenda视图里可用
                selectHelper: true,
                //点击或者拖动选中之后，点击日历外的空白区域是否取消选中状态 true为取消 false为不取消，只有重新选择时才会取消
                unselectAuto: true,
                //Event是否可被拖动或者拖拽
                editable: true,
                //Event被拖动时的不透明度
                dragOpacity: 0.5,


                //日程数据
                events:
                    function (start, end, timezone, callback) {
                        var userid = 1;//用户id
                        var date = new Date();//现在时间
                        var nowDate = date.Format("yyyyMMdd");//现在日期
                        $.ajax({
                            url: 'ashxs/GetSBCalendars.ashx',
                            data: {
                                "userid": userid,
                            },
                            dataType: 'json',
                            type: 'post',
                            success: function (data) {
                                var events = [];
                                //console.log(data);
                                if (data != null) {
                                    var len = data.length;//获取json数组长度
                                    for (var i = 0; i < len; i++) {
                                        var StartDate = getDate(data[i].starttime);//开始时间
                                        var ssDate = StartDate.replace(/\-/g, "");//开始日期
                                        var EndDate = getDate(data[i].endtime);//结束时间
                                        var eeDate = EndDate.replace(/\-/g, "");//结束日期
                                        if (eeDate < nowDate) {//结束日期小于现在日期
                                            //alert(data[i].starttime);
                                            events.push({
                                                id: data[i].id,
                                                title: cutTime(data[i].starttime) + "-" + cutTime(data[i].endtime) + " " + data[i].name,//时间+标题
                                                start: data[i].starttime,
                                                color: 'gray',//显示灰色
                                                end: data[i].endtime
                                            });
                                            //开始日期等于现在日期，或者 开始日期小于现在日期 （（并且结束日期等于现在日期）或（结束日期大于现在日期））
                                        } else if (ssDate == nowDate || ((ssDate < nowDate) && (eeDate == nowDate || eeDate > nowDate))) {
                                            events.push({
                                                id: data[i].id,
                                                title: cutTime(data[i].starttime) + "-" + cutTime(data[i].endtime) + " " + data[i].name,
                                                start: data[i].starttime,
                                                color: 'PaleVioletRed',//苍白的紫罗兰红色
                                                end: data[i].endtime
                                            });
                                        }
                                        else {
                                            events.push({
                                                id: data[i].id,
                                                title: cutTime(data[i].starttime) + "-" + cutTime(data[i].endtime) + " " + data[i].name,
                                                start: data[i].starttime,
                                                color: 'red',//红色
                                                end: data[i].endtime
                                            });
                                        }
                                    }
                                }
                                callback(events);//添加事件
                            }
                        })
                    },


                // 添加日程
                dayClick: function (date, jsEvent, view) {
                    var classCourseDate = date.format();//选择日期
                    var ccDate = classCourseDate.replace(/\-/g, "");//选择的日期格式化
                    var date = new Date();//现在的时间
                    var nowdate = date.Format('yyyyMMdd');//现在的日期
                    if (ccDate < nowdate) {//选择的日期小于现在的日期，返回
                        return;
                    }

                    $("#addObjcectInputModalAdd").modal("show");//显示弹出框
                    var timestart = classCourseDate + "T00:00";//格式化开始时间
                    $('#startTimeAdd').val(timestart);//开始时间初始化
                    $('#endTimeAdd').val(timestart);//结束时间初始化
                    $('#determineAdd').click(function () {
                        var title = $('#classListInfoAdd').val();//获取标题
                        var remark = $('#Remark').val();//获取备注
                        var content = $('#txtContent').val();//获取内容
                        var starttime = $('#startTimeAdd').val();//获取开始时间
                        var endtime = $('#endTimeAdd').val();//获取结束时间
                        if (starttime > endtime) {
                            alert("开始事件不能比结束时间晚。");
                            return;
                        }
                        var ahead = $('#ahead').val();//获取提前几分钟
                        var userid = 1;//获取userid
                        //各项判空
                        if ((title == null || title == "") || (remark == null || remark == "") || (content == null || content == "")
                            || (starttime == null || starttime == "") || (endtime == null || endtime == "") || (ahead == null || ahead == "")) {
                            layer.alert("请先将内容填写完整！");
                            return;
                        }
                        $.ajax({
                            url: 'ashxs/AddSBCalendar.ashx',
                            type: 'post',
                            data: {
                                "title": title,
                                "remark": remark,
                                "content": content,
                                "starttime": starttime,
                                "endtime": endtime,
                                "ahead": ahead,
                                "userid": userid
                            },
                            success: function (data) {
                                if (data == "True") {
                                    layer.alert("日程添加成功！", '', function () {
                                        location.reload();
                                    });
                                }
                                else {
                                    alert("系统繁忙，请稍后重试！");
                                }
                            }
                        })
                    });

                    $('#cancelAdd').click(function () {
                        $('#addObjcectInputModalAdd').modal("hide");//隐藏弹出框
                    })
                },

                // 修改日程
                eventClick: function (event) {
                    $("#addObjcectInputModalEdit").modal("show");//显示弹出框
                    var id = event.id;//获取事件id
                    $.ajax({
                        url: 'ashxs/GetSBCalendarDetail.ashx',
                        type: 'post',
                        dataType: 'json',
                        data: {
                            "id": id
                        },
                        success: function (data) {
                            if (data != null) {//赋值
                                $('#classListInfoEdit').val(data.name);
                                $('#RemarkEdit').val(data.remark);
                                $('#txtContentEdit').val(data.content);
                                $('#startTimeEdit').val(data.starttime.toString().substring(0, 16));
                                $('#endTimeEdit').val(data.endtime.toString().substring(0, 16));
                                $('#aheadEdit').val(data.ahead.toString());
                            }
                            else {
                                layer.alert("该日程不存在或已删除，请刷新重试！");
                            }
                        }
                    })
                    // 修改
                    $('#updateEdit').click(function () {
                        var title = $('#classListInfoEdit').val();//获取标题
                        var remark = $('#RemarkEdit').val();//获取备注
                        var content = $('#txtContentEdit').val();//获取内容
                        var starttime = $('#startTimeEdit').val();//获取开始时间
                        var endtime = $('#endTimeEdit').val();//获取结束时间
                        if (starttime > endtime) {
                            alert("开始事件不能比结束时间晚。");
                            return;
                        }
                        var ahead = $('#aheadEdit').val();//获取提前几分钟
                        //各项判空
                        if ((title == null || title == "") || (remark == null || remark == "") || (content == null || content == "")
                            || (starttime == null || starttime == "") || (endtime == null || endtime == "") || (ahead == null || ahead == "")) {
                            layer.alert("请先将内容填写完整！");
                            return;
                        }
                        $.ajax({
                            url: 'ashxs/UpdateSBCalendar.ashx',
                            type: 'post',
                            data: {
                                "id": id,
                                "title": title,
                                "remark": remark,
                                "content": content,
                                "starttime": starttime,
                                "endtime": endtime,
                                "ahead": ahead
                            },
                            success: function (data) {
                                if (data == "True") {
                                    layer.alert("日程修改成功！", '', function () {
                                        location.reload();
                                    });
                                }
                                else {
                                    layer.alert("系统繁忙，请稍后重试！");
                                }
                            }
                        })
                    })
                    //删除
                    $('#deleEdit').click(function () {
                        layer.confirm('是否确认删除？', {
                            closeBtn: 0, icon: 3, skin: 'layui-layer-red', btn: ['确认', '取消']
                        }, function () {
                            $.ajax({
                                url: 'ashxs/DeleteSBCalendar.ashx',
                                type: 'post',
                                data: {
                                    "id": id
                                },
                                success: function (data) {
                                    if (data == "True") {
                                        layer.alert("删除成功！", '', function () {
                                            location.reload();
                                        });
                                    }
                                    else {
                                        layer.alert("系统繁忙，请稍后重试！");
                                    }
                                }
                            })
                        })
                    });
                    //取消
                    $('#cancelEdit').click(function () {
                        $('#addObjcectInputModalEdit').modal("hide");//隐藏弹出框
                    })
                },

                //拖动事件
                eventDrop: function (event, dayDelta, revertFunc) {
                    var color = event.color;
                    if (color == 'gray') {//颜色为灰色的事件，即过去的事件不能拖动
                        layer.alert("该时间以前的日程不能被拖动。", { skin: 'layui-layer-red', closeBtn: 0, icon: 2 });
                        revertFunc();// 恢复原状
                        return;
                    }
                    var id = event.id;//获取事件id
                    layer.confirm('是否移动到当前日期？', {
                        closeBtn: 0, icon: 3, skin: 'layui-layer-red', btn: ['确认', '取消']
                    }, function () {
                        $.ajax({
                            url: 'ashxs/UpdateSBCalendarDate.ashx',
                            type: 'post',
                            data: {
                                "id": id,
                                "dayDelta": dayDelta.asDays()
                            },
                            success: function (data) {
                                if (data == "True") {
                                    layer.alert("日程移动成功！", '', function () {
                                        location.reload();
                                    })
                                }
                                else {
                                    layer.alert("系统繁忙，请稍后重试！");
                                }
                            }
                        })
                    },
                        //取消按钮，恢复原状
                        function () {
                            revertFunc();
                        }
                    )
                }
            })

 

MySQL数据库，Dos.ORM框架，ajax+一般处理程序，可以换成自己的方法框架。

链接: https://pan.baidu.com/s/1B3Zgs1IKeAwlqZ4JgE2n2A 提取码: jh5f