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部分，代码全部贴出了，如下：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

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");
                }
            });
        }
    });
};