Easyui+MVC+FullCalendar插件实现议程记录功能
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