Easyui + MVC + FullCalendar plug-in implements the calendar record function, easyuifullcalendar

Easyui + MVC + FullCalendar plug-in implements the calendar record function, easyuifullcalendar

It's been a long time, and long time, I forgot my account .... Share a dry product ....

Let's take a look.

To implement this function, first create a record table for storing the calendar (do not ask me why it is in uppercase, because the first version is in oracle and is now in sqlserver, Hahahaha ,,, it's broken ...), Probably as follows:

Front-end view main code, Form Controls I made further encapsulation (every time I write controls, wife is laborious, I am relatively lazy ....), Replace it with your own form control during usage.

<Div class = "toolbar"> <a href = "javascript: void (0) "id =" btnAdd "class =" easyui-linkbutton "plain =" true "iconcls =" icon-add "onclick =" NewCalendar () "> New </a> <a href =" javascript: void (0) "id =" btnQuery "class =" easyui-linkbutton "plain =" true "iconcls =" icon-search "onclick =" OpenQueryPage () "> query </a> </div> <div id =" calendar "> 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 ($. fullCalend Ar. 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 + "" + "title" + ":" + calEvent. title); identifier (this).css ('font-weight', 'normal');}, eventClick: function (event) {OpenCa Lendar (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 OpenQuery Page () {dlg_OpenQuery.window ({closed: true, modal: true, title: 'calendar list', href: '/Calendar_Base/indexquery', iconCls: 'icon-search ', minimizable: false, maximizable: false, collapsible: false}); dlg_OpenQuery.window ("open");} function AddCalendar (pDate) {$ ("# btn_DlgAdd "). show (); // Add and save $ ("# btn_DlgCancle "). show (); // clear $ ("# btn_DlgEdit "). hide (); // edit and save $ ("# btn_DlgDel "). hide (); // Delete dlg_All.dialog ({ IconCls: 'icon-add', title: 'add information'}); 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 ({iconC Ls: 'icon-edit', title: 'edit information'}); $ ("# btn_DlgAdd "). hide (); $ ("# btn_DlgCancle "). hide (); $ ("# btn_DlgEdit "). show (); $ ("# btn_DlgDel "). show (); // Delete $ ('# dlg_ff '). form ('clear'); $ ('# dlg_ff '). form ('load', '/Calendar_Base/QueryOne? Calendar_Id = '+ pCalendar_Id); dlg_All.dialog ('open');} function NewCalendar () {$ ("# btn_DlgAdd "). show (); // Add and save $ ("# btn_DlgCancle "). show (); // clear $ ("# btn_DlgEdit "). hide (); // edit and save $ ("# btn_DlgDel "). hide (); // Delete dlg_All.dialog ({iconCls: 'icon-add', title: 'add information'}); dlg_All.find ('form '). form ('clear'); dlg_All.dialog ('open') ;}; function EditSaveEvent () {if ($ ('# dlg_ff '). form ('validate') {if ($ ("# Star T_Date "). datebox ('getvalue')> $ ("# End_Date "). datebox ('getvalue') {showEuMsg ("[start date] cannot be greater than [end date ]! "," Warning "); return false;} if ($ (" # Start_Date "). datebox ('getvalue') =$ ("# End_Date "). datebox ('getvalue') {if ($ ('# Start_Time '). timespinner ('getvalue')> $ ('# End_Time '). timespinner ('getvalue') {showEuMsg ("[start time] cannot be greater than [End Time ]! "," 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 ($ ("# St Art_Date "). datebox ('getvalue')> $ ("# End_Date "). datebox ('getvalue') {showEuMsg ("[start date] cannot be greater than [end date ]! "," Warning "); return false;} if ($ (" # Start_Date "). datebox ('getvalue') =$ ("# End_Date "). datebox ('getvalue') {if ($ ('# Start_Time '). timespinner ('getvalue')> $ ('# End_Time '). timespinner ('getvalue') {showEuMsg ("[start time] cannot be greater than [End Time ]! "," 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 (" prompt "," Are you sure you want to delete the selected record? ", 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 ");}});}});};

The following is how to write related processing events in the corresponding controller. This is not explained here (all those that have been exposed to mvc should be, no ....... Let's see ....)

Fullcalendar: fullcalendar.rar