Easyui+MVC+FullCalendar插件实现日程记录功能

好久好久好久，，，没有写博客了，，久到账号都忘记了。。。。分享一个干货。。。。

废话少说，先看看效果图。

要实现这样一个功能，先创建一个用于存储日程的记录表（不要问我为什么都是大写，因为初版在oracle中，现在在sqlserver，，哈哈哈哈，，，断气了，，，，我先缓缓。。。），大概如下：

前端view主要代码，表单控件我做了进一步封装（每次都写控件太太费劲了，，，，，我比较懒。。。。），亲在使用过程中替换成自己的表单控件即可。

        <div class="toolbar">
            <a href="javascript:void(0)" id="btnAdd" class="easyui-linkbutton" plain="true" iconcls="icon-add"
                onclick="NewCalendar()">新建</a>
            <a href="javascript:void(0)" id="btnQuery" class="easyui-linkbutton" plain="true"
                iconcls="icon-search" onclick="OpenQueryPage()">查询</a>
        </div>
        <div id="calendar" style="width: 950px;margin: 10px auto;"></div>

        <div id="OpenQuery" class="easyui-window" style="width: 850px; height: 510px;" closed="true">
        </div>
        <div style="display: none">
            <div id="dlg_All" style="width: 380px; height: 450px;">
                <form id="dlg_ff" method="post" action="">
                <input id="hdCalendar_Id" type="hidden" name="Calendar_Id" />
                <table class="table">
                    <tr>
                        <td class="tdt">
                            @Html.EULabel("开始日期：", "Start_Date")
                        </td>
                        <td class="tdv">
                            @Html.EUTextBox_Date("Start_Date","")
                        </td>
                    </tr>
                    <tr>
                        <td class="tdt">
                            @Html.EULabel("开始时间：", "Start_Time")
                        </td>
                        <td class="tdv">
                            @Html.EUTextBox_Time("Start_Time", "")
                        </td>
                    </tr>
                    <tr>
                        <td class="tdt">
                            @Html.EULabel("结束日期：", "End_Date")
                        </td>
                        <td class="tdv">
                            @Html.EUTextBox_Date("End_Date", "")
                        </td>
                    </tr>
                    <tr>
                        <td class="tdt">
                            @Html.EULabel("结束时间：", "End_Time")
                        </td>
                        <td class="tdv">
                            @Html.EUTextBox_Time("End_Time", "")
                        </td>
                    </tr>
                    <tr>
                        <td class="tdt">
                            @Html.EULabel("标题：", "Title")
                        </td>
                        <td class="tdv">
                            @Html.EUTextBox("Title", 50)
                        </td>
                    </tr>
                    <tr>
                        <td class="tdt">
                            @Html.EULabel("备注：", "Description")
                        </td>
                        <td class="tdv">
                            @Html.EUTextArea("Description", 200,"86%","80px",false)
                        </td>
                    </tr>
                </table>
                </form>
            </div>
            <div id="btns_All">
                @Html.EUButton("btn_DlgAdd", "保存", "icon-ok", "AddSaveEvent()")
                @Html.EUButton("btn_DlgEdit", "保存", "icon-ok", "EditSaveEvent()")
                @Html.EUButton("btn_DlgDel", "删除", "icon-delete", "DeleteSaveEvent()")
                @Html.EUButton("btn_DlgCancle", "清空", "icon-clear", "javascript:$('#dlg_All').find('form').form('clear');")
                @Html.EUButton("btn_DlgClose", "关闭", "icon-off", "javascript:$('#dlg_All').dialog('close');")
            </div>
        </div>

对应js部分，代码全部贴出了，如下：

var dlg_All;
var dlg_OpenQuery;
$(function () {
    dlg_All = $('#dlg_All');
    dlg_All.dialog({
        closed: true,
        modal: true,
        buttons: '#btns_All'
    });
    dlg_OpenQuery = $('#OpenQuery');

    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: false,
        dayClick: function (date, allDay, jsEvent, view) {
            AddCalendar($.fullCalendar.formatDate(date, "yyyyMMdd"));
        },
        eventMouseover: function (calEvent, jsEvent, view) {
            var fstart = $.fullCalendar.formatDate(calEvent.start, "yyyy/MM/dd HH:mm");
            var fend = $.fullCalendar.formatDate(calEvent.end, "yyyy/MM/dd HH:mm");
            $(this).attr('title', fstart + " - " + fend + " " + "标题" + " : " + calEvent.title);
            $(this).css('font-weight', 'normal');
        },
        eventClick: function (event) {
            OpenCalendar(event.id);
        },
        events: function (start, end, callback) {
            var datestart = $.fullCalendar.formatDate(start, "yyyyMMdd");
            var dateend = $.fullCalendar.formatDate(end, "yyyyMMdd");
            $.ajax({
                url: '/Calendar_Base/CalDataList',
                dataType: 'json',
                cache: false,
                data: {
                    start: datestart,
                    end: dateend
                },
                success: function (result) {
                    var events = [];
                    for (var i = 0; i < result.length; i++) {
                        events.push({
                            title: result[i].TITLE,
                            start: string2date(result[i].START_DATE, result[i].START_TIME),
                            end: string2date(result[i].END_DATE, result[i].END_TIME),
                            id: result[i].CALENDAR_ID
                        });
                    }
                    callback(events);
                }
            });
        }
    });
});

function string2date(dt, ti) {
    var y = dt.substr(0, 4);
    var m = dt.substr(4, 2);
    var d = dt.substr(6, 2);
    return new Date(Date.parse(y + '/' + m + '/' + d + ' ' + ti));
}

function OpenQueryPage() {
    dlg_OpenQuery.window({
        closed: true,
        modal: true,
        title: '日程清单',
        href: '/Calendar_Base/IndexQuery',
        iconCls: 'icon-search',
        minimizable: false,
        maximizable: false,
        collapsible: false
    });
    dlg_OpenQuery.window("open");
}

function AddCalendar(pDate) {
    $("#btn_DlgAdd").show(); //添加保存
    $("#btn_DlgCancle").show(); //清空
    $("#btn_DlgEdit").hide(); //编辑保存
    $("#btn_DlgDel").hide(); //删除
    dlg_All.dialog({
        iconCls: 'icon-add',
        title: '添加信息'
    });
    dlg_All.find('form').form('clear');
    $("#Start_Date").datebox('setValue', pDate.toString());
    $('#Start_Time').timespinner('setValue', '00:00');
    $("#End_Date").datebox('setValue', pDate.toString());
    $('#End_Time').timespinner('setValue', '23:59');
    $('#dlg_ff').form('validate')
    dlg_All.dialog('open');
}

function OpenCalendar(pCalendar_Id) {
    dlg_All.dialog({
        iconCls: 'icon-edit',
        title: '编辑信息'
    });
    $("#btn_DlgAdd").hide();
    $("#btn_DlgCancle").hide();
    $("#btn_DlgEdit").show();
    $("#btn_DlgDel").show(); //删除
    $('#dlg_ff').form('clear');
    $('#dlg_ff').form('load', '/Calendar_Base/QueryOne?Calendar_Id=' + pCalendar_Id);
    dlg_All.dialog('open');
}

function NewCalendar() {
    $("#btn_DlgAdd").show(); //添加保存
    $("#btn_DlgCancle").show(); //清空
    $("#btn_DlgEdit").hide(); //编辑保存
    $("#btn_DlgDel").hide(); //删除
    dlg_All.dialog({
        iconCls: 'icon-add',
        title: '添加信息'
    });
    dlg_All.find('form').form('clear');
    dlg_All.dialog('open');
};

function EditSaveEvent() {
    if ($('#dlg_ff').form('validate')) {
        if ($("#Start_Date").datebox('getValue') > $("#End_Date").datebox('getValue')) {
            showEuMsg("【开始日期】不能大于【结束日期】！", "warning");
            return false;
        }
        if ($("#Start_Date").datebox('getValue') == $("#End_Date").datebox('getValue')) {
            if ($('#Start_Time').timespinner('getValue') > $('#End_Time').timespinner('getValue')) {
                showEuMsg("【开始时间】不能大于【结束时间】！", "warning");
                return false;
            }
        }
        $('#dlg_ff').form('submit', {
            url: '/Calendar_Base/EditOne',
            success: function (result) {
                var data = eval('(' + result + ')');
                if (data.success) {
                    dlg_All.dialog('close');
                    $("#calendar").fullCalendar('refetchEvents');
                    showEuMsg(data.msg, "success");
                }
                else
                    showEuMsg(data.msg, "error");
            }
        });
    }
}

function AddSaveEvent() {
    if ($('#dlg_ff').form('validate')) {
        if ($("#Start_Date").datebox('getValue') > $("#End_Date").datebox('getValue')) {
            showEuMsg("【开始日期】不能大于【结束日期】！", "warning");
            return false;
        }
        if ($("#Start_Date").datebox('getValue') == $("#End_Date").datebox('getValue')) {
            if ($('#Start_Time').timespinner('getValue') > $('#End_Time').timespinner('getValue')) {
                showEuMsg("【开始时间】不能大于【结束时间】！", "warning");
                return false;
            }
        }
        $('#dlg_ff').form('submit', {
            url: '/Calendar_Base/AddOne',
            success: function (result) {
                var data = eval('(' + result + ')');
                if (data.success) {
                    dlg_All.dialog('close');
                    $("#calendar").fullCalendar('refetchEvents');
                    showEuMsg(data.msg, "success");
                }
                else
                    showEuMsg(data.msg, "error");
            }
        });
    }
};

function DeleteSaveEvent() {
    var postData = {
        Calendar_Id: $("#hdCalendar_Id").val()
    }
    $.messager.confirm("提示", "您确认删除选定的记录吗？", function (deleteAction) {
        if (deleteAction) {
            $.ajax({
                url: "/Calendar_Base/DeleteOne",
                type: "post",
                data: postData,
                cache: false,
                dataType: "json",
                success: function (result) {
                    if (result.success) {
                        dlg_All.dialog('close');
                        $("#calendar").fullCalendar('refetchEvents');
                        showEuMsg(result.msg, "success");
                    }
                    else
                        showEuMsg(result.msg, "error");
                }
            });
        }
    });
};

下面就是在对应的controller中写相关的处理事件即可，这里就不做说明了（接触过mvc的应该都会，，，不会。。。。。。。就看看得了。。。。）

fullcalendar下载地址：fullcalendar.rar