Calendar最新代码 - hwoarangzk的博客

作者在 2010-09-06 08:26:18 发布以下内容

1. ChangeDateAction

package calendar;

import com.opensymphony.xwork2.ActionSupport;

public class ChangeDateAction extends ActionSupport {

private String type;
private String searchDate;
private String year;
private String month;
private String quarter;
private String daysInMonth;
private String weekNumber;

public String getYear() {
return year;
}

public void setYear(String year) {
this.year = year;
}

public String getMonth() {
return month;
}

public void setMonth(String month) {
this.month = month;
}

public String getQuarter() {
return quarter;
}

public void setQuarter(String quarter) {
this.quarter = quarter;
}

public String getDaysInMonth() {
return daysInMonth;
}

public void setDaysInMonth(String daysInMonth) {
this.daysInMonth = daysInMonth;
}

public String getType() {
return type;
}

public void setType(String type) {
  this.type = type;
}

    public String execute() throws Exception {
    //ActionContext ctx = ActionContext.getContext();
    //Map application = ctx.getApplication();
    String returnStr = this.getType();
    String searchDate = this.getSearchDate();
    String[] dateArray = searchDate.split(";");
    year = dateArray[0];
    month = dateArray[1];
    quarter = dateArray[2];
    daysInMonth = dateArray[3];
    weekNumber = dateArray[4];

  return returnStr;

    }

public String getSearchDate() {
return searchDate;
}

public void setSearchDate(String searchDate) {
this.searchDate = searchDate;
}

public String getWeekNumber() {
return weekNumber;
}

public void setWeekNumber(String weekNumber) {
this.weekNumber = weekNumber;
}
}

2. calendar.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Calendar</title>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/calendar.js" ></script>
<link rel="stylesheet" href="css/calendar.css" />
</head>
<body>
<div><b>View Studies By:</b>
<select id="model">
  <option value="week">Week</option>
  <option value="month" selected>Month</option>
  <option value="quarter">Quarter</option>
  <option value="year">Year</option>
</select>
</div><br/>
<div class="display">
<div class="arrowDiv" change="-1"><<</div>
<div><input type="text" id="displayModel" disabled="disabled" /></div>
<div class="arrowDiv" change="1">>></div>
<input id="recordedDate" type="hidden" />
</div><br/><br/>
<div id="tabs">
<div class="tab" id='weekTab'>Week</div>
<div class="tab" id='monthTab'>Month</div>
<div class="tab" id='quarterTab'>Quarter</div>
<div class="tab" id='yearTab'>Year</div>
</div><br/><br/>
<div id="mainInterface"></div>
</body>
</html>

3. calendar.js

$(document).ready(function() {

$("#monthTab").addClass("selected");
var currentSystemDate = new Date();
var currentYear = currentSystemDate.getFullYear();
var currentMonth = monthArray[currentSystemDate.getMonth()];
var currentQuarter = getQuarterCode(currentMonth);
var currentWeek = "1st Week";
var daysInMonthStr = currentYear + "/" + Number(currentSystemDate.getMonth() + 2) + "/0";
var currentDaysInMonth = new Date(daysInMonthStr).getDate();
var dateStr = currentYear + ";" + currentMonth + ";" + currentQuarter + ";" + currentDaysInMonth + ";" + currentWeek;
$("#recordedDate").val(dateStr);
$("#displayModel").val(currentYear + ' ' + currentMonth);
refreshTable("month",dateStr);

$("#model").change(function() {
  var model = $("#model").val();
  var recordedDate = $("#recordedDate").val();
  var dateArray = recordedDate.split(";");
  var year = dateArray[0];
  var month = dateArray[1];
  var quarter = dateArray[2];
  var weekNumber = dateArray[4];
  var newModelVal = "";

  if (model == "week") {
   newModelVal = month + " " + weekNumber;
  } else if (model == "month") {
   newModelVal = year + ' ' + month;
  } else if (model == "quarter") {
   newModelVal = year + " " + quarter;
  } else {
   newModelVal = year;
  }
  $("#displayModel").val(newModelVal);
  $("#tabs .selected").removeClass("selected");
  $("#" + model + "Tab").addClass("selected");
  $("#mainInterface").empty();
  refreshTable(model,recordedDate);
});

$("div.arrowDiv").click(function() {
  var changeNumber = $(this).attr("change");
  var currentModel = $("#model").val();
  var recordedDate = $("#recordedDate").val();

  var newRecordedDate = '', newDisplayDate = '';

  if (changeNumber == "1") {//move date forward
   if (currentModel == "week") {
    newRecordedDate = moveDate("forward","week",recordedDate);
    newDisplayDate = getDisplayDate('week', newRecordedDate);
   } else if (currentModel == 'month') {
    newRecordedDate = moveDate("forward","month",recordedDate);
    newDisplayDate = getDisplayDate('month', newRecordedDate);
   } else if (currentModel == 'quarter') {
    newRecordedDate = moveDate("forward","quarter",recordedDate);
    newDisplayDate = getDisplayDate('quarter', newRecordedDate);
   } else {
    newRecordedDate = moveDate("forward","year",recordedDate);
    newDisplayDate = getDisplayDate('year', newRecordedDate);
   }
  } else {
   if (currentModel == "week") {
    newRecordedDate = moveDate("backward","week",recordedDate);
    newDisplayDate = getDisplayDate('week', newRecordedDate);
   } else if (currentModel == 'month') {
    newRecordedDate = moveDate("backward","month",recordedDate);
    newDisplayDate = getDisplayDate('month', newRecordedDate);
   } else if (currentModel == 'quarter') {
    newRecordedDate = moveDate("backward","quarter",recordedDate);
    newDisplayDate = getDisplayDate('quarter', newRecordedDate);
   } else {
    newRecordedDate = moveDate("backward","year",recordedDate);
    newDisplayDate = getDisplayDate('year', newRecordedDate);
   }
  }
  $("#displayModel").val(newDisplayDate);
  $("#recordedDate").val(newRecordedDate);
  refreshTable(currentModel, newRecordedDate);
});

});

var monthArray = ["January","February","March","April","May","June","July","August","September","October","November","December"];
var quarterArray = ["1st Quarter","2nd Quarter","3rd Quarter","4th Quarter"];
var weekArray = ["1st Week","2nd Week","3rd Week","4th Week","5th Week","6th Week"];

function getDaysInMonth(year,month) {
var dateStr = year + "/" + Number(Number(month) + 2) + "/0";
return new Date(dateStr).getDate();
}

function refreshTable(type, searchDate) {
$("#mainInterface").empty();
$.ajax({
  url:'changePage.action?type='+type+'&searchDate='+searchDate,
  type:'post',
  success:function(data) {
   $(data).appendTo($("#mainInterface"));
  }
});
}

4. calendar.css

.tab {float:left;border:1px solid black;}
#tabs .selected {background:red;}
.arrowDiv {border:1px solid black;cursor:pointer;}
.display div {float:left;}
#mainInterface table td {border:1px solid black;}
#mainInterface table {width:720px;}

5. struts.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>
    <package name="Struts2" extends="struts-default">
        <action name="changePage" class="calendar.ChangeDateAction">
        <result name="week">/week.jsp</result>
        <result name="month">/month.jsp</result>
        <result name="quarter">/quarter.jsp</result>
        <result name="year">/year.jsp</result>
        </action>
    </package>
</struts>

6. week.jsp

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<table border="1" cellspacing="0" cellpadding="0">
<thead>
  <tr>
   <td>Monday</td>
   <td>Tuesday</td>
   <td>Wednesday</td>
   <td>Thursday</td>
   <td>Friday</td>
   <td>Saturday</td>
   <td>Sunday</td>
  </tr>
</thead>
<tbody>
  <tr>
   <td>1111</td>
   <td>2222</td>
   <td>3333</td>
   <td>4444</td>
   <td>5555</td>
   <td>6666</td>
   <td>7777</td>
  </tr>
</tbody>
</table>

7. month.jsp

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<table border="1" cellspacing="0" cellpadding="0" id="monthTable">
<thead>
<tr></tr>
</thead>
</table>
<script>
var days = Number("${daysInMonth}");
var tds = "";
for (var i = 0; i < days; i++) {
tds += "<td>" + Number(i + 1) + "</td>";
}
$("table#monthTable thead tr").append($(tds));
</script>

8. quarter.jsp

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<table border="1" cellspacing="0" cellpadding="0">
<thead>
  <tr></tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var quarters = "${quarter}";
var tds = '';
if (quarters == '1st Quarter') {
  tds = '<td>January</td><td>February</td><td>March</td>';
} else if (quarters == '2nd Quarter') {
  tds = '<td>April</td><td>May</td><td>June</td>';
} else if (quarters == '3rd Quarter') {
  tds = '<td>July</td><td>August</td><td>September</td>';
} else {
  tds = '<td>October</td><td>November</td><td>December</td>';
}
$('#mainInterface thead tr').append($(tds));
</script>

9. year.jsp

<%@ page language="java" import="java.util.*" pageEncoding="ISO-

8859-1"%>
<table border="1" cellspacing="0" cellpadding="0">
  <thead>
   <tr>
    <td>January</td>
    <td>February</td>
    <td>March</td>
    <td>April</td>
    <td>May</td>
    <td>June</td>
    <td>July</td>
    <td>August</td>
    <td>September</td>
    <td>October</td>
    <td>November</td>
    <td>December</td>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>1111</td>
    <td>2222</td>
    <td>3333</td>
    <td>4444</td>
    <td>5555</td>
    <td>6666</td>
    <td>7777</td>
    <td>8888</td>
    <td>9999</td>
    <td>aaaa</td>
    <td>bbbb</td>
    <td>cccc</td>
   </tr>
  </tbody>
</table>