Java SSH Project Summary--set weekday calendar

Preface

Today's article is the theme of the calendar , First introduce the background , this calendar is for an online reservation system service , Online booking is the choice of working days , and then the specific business of the appointment , and the weekday is the setting is through our calendar to complete .

The Chase

effect

we'll take a look at the calendar. , The first one is the current month's calendar , the second one is the calendar that sets the working day ,

decomposition

we want to implement the calendar function set by this weekday , to decompose this function :

1. achieve a perpetual calendar .

2. Click on the calendar to save the workday to the database via the interface

3. render the date set in the database to the interface calendar in a different color .

Implement

Database Design

time to save in database , you need to keep it for the month and day , because the date in the database is also rendered in the interface , so for database design such as :

contains fields:PRIMARY KeyId,year (year) MONTH (Month) Day (Day) WORKDAY (Month Day) State (Status)

Coding

About the calendar of the rendering code a wide range of interested students can download their own, we will be a few of the key points of knowledge in detail.

we are in the interface, the mouse click on the date of the cell to get the current month and day, put in the array, click the same cell again, the date is canceled from the array, click OK to upload the array to the background, in the background of the operation of arrays, save to the database, we first look at the front desk JS Code:

Events that are triggered when the mouse clicks on a date:

Put a single date into the array function setworkdate (v) {var  s,festival;var  sobj=eval (' SD ' +  v); var  d= Sobj.innerhtml-1;var Myxz=getastro (cld[d].smonth,cld[d].sday);       will be 10 below the number, plus a 0 such as, 1-01,2-02, in order to unify operation var sss= ' GD ' +v;//get year var year=cld[d].syear;//get month var month=cld[d].smonth;// Get Day var day=cld[d].sday;function formatten (num) {return num > 9? (num + ""): ("0" + num);} var postdate=year+ "-" +formatten (month) + "-" +formatten (day);//Set Weekday color var Flag;document.getelementbyid (SSS). Style.backgroundcolor= ' #A8E1FD ';//whether the traversal is in the array, if it is deleted, if not, add for (Var i=0;i<arrayobj.length;i++) {if (postdate== Arrayobj[i]) {arrayobj.splice (i,1); flag= "Delete";d Ocument.getelementbyid (SSS). style.backgroundcolor= ' Transparent '; return;}      }  If not, add if (flag! = "Delete") {Arrayobj.push (postdate); return;}}

Click the OK button to trigger the event

Set the date to the database function Setinputdb () {//will be fitted with an array of dates, giving a hidden text box document.getElementById (' Datearray '). Value=arrayobj;var Alldate = document.getElementById (' Datearray '). value;//if an array has values, set the date to save to the database if (alldate! = "") {$.ajax ({        type: "POST",        URL: ' workdate_add.action?alldate= ' +alldate,        data: {},        DataType: "Text",        success:function (data) {            if (data== "True") {           alert ("Set success! ");                   }        }       });/ /If the array has no value, the current date is passed into the background, the date of the current month is emptied from the database}else{//global is the 1th number of the current date, and is the global variable var globaldate=global;$.ajax ({        type: "POST" ,        URL: ' workdate_deletemonth.action?globaldate= ' +globaldate,        data: {},        dataType: ' Text ',        Success:function (data) {            if (data== "true") {           alert ("Set successfully! ");                   }        }       });} Return }

now let's see . Controller In the code, for the working day setting, here need two methods, one is to save the date array to the database, and the other is based on the parameters passed, to cancel the date of the cancellation need .

/** Set Weekday */public String Add () throws Exception{try {//Get all dates sent by the foreground//parse the date into the year, month, day (full name), And put in the list set System.out.println (alldate); String ids = Request.getparameter ("alldate");//The array values in the page submission form are obtained through the request object. String[] dates= alldate.split (",");//Get the first day, get the set year and month string managedate= dates[0]; String manageyear=managedate.substring (0, 4);    String managemonth=managedate.substring (5, 7);      Declares the weekday entity workdate workdate = null;        Declares the working day entity collection List<workdate> workdates = new arraylist<workdate> (); Put the date all in a working day collection to bulk add data for (int i = 0; i < dates.length; i++) {//To cut the date workdate=new workdate (); String selfdate = dates[i]; String year=selfdate.substring (0, 4); String month=selfdate.substring (5, 7); String day=selfdate.substring (8, 10);//Property Assignment Workdate.setyear (year); Workdate.setmonth (month); Workdate.setworkday ( Selfdate); Workdate.setday (day); Workdate.setstate ("0");//entity into entity set Workdates.add (workdate);} Determine if the month you want to set is set, delete the previously set information if it is already set, and then add//if not, add the Boolean flag=workdateservice.isexis directlyT (Manageyear, Managemonth); if (flag) {//no record returned true//no record added workdateservice.savelists directly (workdates);} else {//delete before adding Workdateservice.deleterepeat (Manageyear, managemonth);//BULK Insert list collection into the database Workdateservice.savelists ( workdates);} String result= "True"; SYSTEM.OUT.PRINTLN (result); Outjson (Servletactioncontext.getresponse (), result); SYSTEM.OUT.PRINTLN ("Bulk INSERT succeeded! ");} catch (Exception e) {e.printstacktrace ();} return null;} /** set Weekday */public string Deletemonth () throws Exception{try {//Get foreground sent over the month date String datadlete = Request.getparameter (" Globaldate ");//The array value in the page submission form is obtained through the request object. Year and month string manageyear=datadlete.substring (0, 4);  String managemonth=datadlete.substring (5, 7);//Determine the passing of the year and month, to see if there is data in the database, if there is a delete data to return true to the foreground, does not directly return true to the foreground Boolean Flag=workdateservice.isexist (Manageyear, managemonth); String result = "true"; if (flag==false) {//delete directly, return Trueworkdateservice.deleterepeat (Manageyear, managemonth); result= "  True ";} SYSTEM.OUT.PRINTLN (result); Outjson (Servletactioncontext.getresponse (), result);} catch (ExCeption e) {e.printstacktrace ();} return null; }

 

The next step is to get the date from the database, to render it on the interface, and in the controller We convert the date in the database to the JSON to the foreground, about the JSON The conversion, you can see the previous blog "Java SSH project summary--jqueryligerui-form JSON conversion ",controller Code,

/** get the Set date record for the last month or next January, upload the page to render the calendar */public void Managemonth () throws Exception {//Get the date transmitted by the foreground string postdate = Request.getparameter ("postdate");//The array value in the page submission form is obtained through the request object. String manageyear=postdate.substring (0, 4); String managemonth=postdate.substring (5, 7);//Check out the current month's data loaded onto the calendar list<workdate> workdates = new arraylist< Workdate> (); Workdates=workdateservice.findlist (Manageyear, managemonth);//Convert working day collection to jsonstring resultJson= Jsonutils.tojson (workdates); System.out.println (Resultjson); Outjson (response, Resultjson);}

Reception to get Controller Pass it over. JSON string that will JSON The string is placed in the array again, and the calendar is rendered by an array, with the following code:

Renders the calendar, fetching data from the database function ChangeEvent () {arrayobj=new Array (); var y,m;y=cld. SY.SELECTEDINDEX+1900;M=CLD. sm.selectedindex;//Gets the current year/month Var month=m+1;var postdate=y+ "-" +formatten (month) + " -01"; global=postdate;// Gets the current month's data from the background to load var inputstr= ""; $.ajax ({      type: "POST",      URL: ' workdate_managemonth.action?postdate= ' + Postdate,      data: {},      DataType: "JSON",      success:function (data) {for        (var n=0;n<data.length;n++) {/ /Get JSON after rendering calendar var Saaa=data[n].workday; Inputstr+=saaa+ ",";      Arrayobj.push (SAAA);      }    document.getElementById ("Datearray"). Value=inputstr;      Dataarray=data;      CHANGECLD ();}}      );}

Summary

The entire working day to set the completion of the calendar, the save date through the form of an array to the background to save, rendering data by the background data into JSON to the foreground, analysis JSON into the array, and then renders the calendar through an array.

Java SSH Project Summary--set weekday calendar