很久很久很久,,,沒有寫博客了,,久到帳號都忘記了。。。。分享一個乾貨。。。。javascript
廢話少說,先看看效果圖。css
要實現這樣一個功能,先建立一個用於存儲日程的記錄表(不要問我爲何都是大寫,由於第一版在oracle中,如今在sqlserver,,哈哈哈哈,,,斷氣了,,,,我先緩緩。。。),大概以下:前端
前端view主要代碼,表單控件我作了進一步封裝(每次都寫控件太太費勁了,,,,,我比較懶。。。。),親在使用過程當中替換成本身的表單控件便可。java
<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部分,代碼所有貼出了,以下:ajax
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的應該都會,,,不會。。。。。。。就看看得了。。。。)sql
fullcalendar下載地址:fullcalendar.rarjson