Java SSH Project Summary-set the calendar of work days

Java SSH Project Summary-set the calendar of work days

Preface

The topic of today's article is calendar. First, we will introduce the background. This calendar serves as an online booking system. Online Booking means selecting workdays and then making an appointment for specific services, the workday settings are completed through our calendar.

Question

Effect

Let's take a look at the calendar. The first one is the calendar of the current month, and the second one is the calendar of the end of the working day,

Decomposition

We need to implement the Calendar function set on this workday and break it down:

1. Implement 10 thousand bytes.

2. Click calendar on the page to save the workday to the database.

3. render the preset date in the database to the interface calendar for identification in different colors.

Implementation

Database Design

The database needs to be saved for time, year, month, and day, because the date stored in the database needs to be rendered on the interface, so the database design is as follows:

Contains the field: primary key ID, Year (Year) MONTH (MONTH) DAY (DAY) WORKDAY (Year month day) STATE (STATE)

Encoding

There are a lot of calendar rendering code. If you are interested, you can download it by yourself. Here are some of the key knowledge points.

On the page, click the cell where the date is located to get the current year, month, and day, and put it in the array. Click the same cell again, cancel the date from the array, and click OK to upload the array to the background, operate the array in the background and save it to the database. Let's take a look at the front-end js Code:

Events triggered when you click the date:

// Put a single date in 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); // Add a number less than 10 to a value of 0, for example, 1-01,2-02 ·, so that you can operate var sss = 'gd '+ v in a unified manner; // obtain the year var year = cld [d]. sYear; // obtain the monthly var month = cld [d]. sMonth; // obtain the daily var day = cld [d]. sDay; function formatTen (num) {return num> 9? (Num + ""): ("0" + num);} var postDate = year + "-" + formatTen (month) + "-" + formatTen (day ); // set the workday color var flag; document. getElementById (sss ). style. backgroundColor = '# A8E1FD'; // determines whether the traversal is in the array. If yes, It is deleted. If not, add for (var I = 0; I
Click OK to trigger the event.
// Set the date to the database function setInputDb () {// give an array containing the date to a hidden text box document. getElementById ('datearray '). value = arrayObj; var allDate = document. getElementById ('datearray '). value; // if an array has a value, set the date and save it 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 successfully! ") ;}}}); // If the array has no value, the current date is passed to the background, clear the date of the current month from the database} else {// global is the date of the year and month of the current date, which 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 take a look at the code in the controller. For workday settings, we need two methods: Saving the date array to the database, and passing parameters, to cancel the date.
/** Set workday */public String add () throws Exception {try {// retrieve all the dates passed by the foreground // parse the dates, it is divided into years, months, and days (full name) and placed into the System in the list set. out. println (allDate); String ids = request. getParameter ("allDate"); // obtain the array value in the page submission form 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); // declare workday entity WorkDate workDate = null; // declare the workday entity set List
  
   
WorkDates = new ArrayList
   
    
(); // Add all dates to the workday set to add data in batches for (int I = 0; I <dates. length; I ++) {// 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); // assign workDate to the attribute. setYear (year); workDate. setMonth (month); workDate. setWorkday (selfDate); workDate. setDay (day); workDate. setState ("0"); // puts an object into the workDates object set. add (workDate) ;} // Determine whether the month to be set has been set. If it has been set, delete the previously set information and add it again. // if not, add boolean flag = workDateService directly. isExist (manageYear, manageMonth); if (flag) {// No record returns true // No record add workDateService directly. saveLists (workDates);} else {// delete it first, and add workDateService. deleteRepeat (manageYear, manageMonth); // inserts the list set into the database in batches. saveLists (workDates);} String result = "True"; System. out. println (result); outJson (ServletActionContext. getRespons E (), result); System. out. println ("batch insert successful! ");} Catch (Exception e) {e. printStackTrace ();} return null;}/** set workday */public String deleteMonth () throws Exception {try {// obtain the date String dataDlete = request from the foreground. getParameter ("globalDate"); // obtain the array value in the page submission form through the request object. // Year and month String manageYear = dataDlete. substring (0, 4); String manageMonth = dataDlete. substring (5, 7); // judge the passed year and month, and check whether there is data in the database. If yes, delete the data and return true to the foreground, returns true to the front-end 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 and render it on the interface. In the controller, we convert the date in the database to json and upload it to the foreground. For the json conversion, you can refer to the previous blog "Java SSH Project Summary-JqueryLigerUI-Table Json conversion", controller code,
 
/** Get the set date record of last month or next month, and upload it to the page for rendering calendar */public void manageMonth () throws Exception {// obtain the date String postDate = request. getParameter ("postDate"); // obtain the array value in the page submission form through the request object. String manageYear = postDate. substring (0, 4); String manageMonth = postDate. substring (5, 7); // extract the data of the current month and load it to the calendar List
  
   
WorkDates = new ArrayList
   
    
(); WorkDates = workDateService. findList (manageYear, manageMonth); // convert the workday set to jsonString resultJson = JsonUtils. toJson (workDates); System. out. println (resultJson); outJson (response, resultJson );}
   
  


The front-end will get the json string passed by the controller. Put the json string into the array again and use the array for calendar rendering. The Code is as follows:
// Render the calendar and obtain the data function changeEvent () {arrayObj = new Array (); var y, m; y = CLD from the database. SY. selectedindex+ 1900; m = CLD. SM. selectedIndex; // obtain the var month = m + 1 of the current month. var postDate = y + "-" + formatTen (month) + "-01"; global = postDate; // obtain the data of the current month from the background and load var inputStr = ""; $. ajax ({type: "POST", url: 'workdate _ manageMonth. action? PostDate = '+ postDate, data :{}, dataType: "json", success: function (data) {for (var n = 0; n
  
   

   

   
 
Summary
   
 
   
The calendar is set throughout the working day, and the date to be saved is uploaded to the background in the form of an array for storage. The rendered data is transferred to the foreground by converting the background data into json, and json is parsed to the array, then, use an array to render the calendar.