未完成版 - hwoarangzk的博客

作者在 2010-09-03 08:40:44 发布以下内容

1.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>
<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>

2.calendar.js

$(document).ready(function() {
$("#model").change(function() {
  var model = $("#model").val();
  var newModelVal = "";
  if (model == "week") {
   newModelVal = monthArray[0];
  } else if (model == "month") {
   newModelVal = new Date().getYear();
  } else if (model == "quarter") {
   newModelVal = new Date().getYear();
  } else {
   newModelVal = new Date().getYear();
  }
  $("#displayModel").val(newModelVal);
  $("#tabs .selected").removeClass("selected");
  $("#" + model + "Tab").addClass("selected");
  $("#mainInterface").empty();
  refreshTable(model,newModelVal);
});

$("div.arrowDiv").click(function() {
  var changeNumber = $(this).attr("change");
  var currentModel = $("#model").val();
  var currentDate = $("#displayModel").val();
  var position = 0;
  if (changeNumber == "1") {
   if (currentModel == "week") {
    position = $.inArray(currentDate, monthArray) + 1;
    position = position > 6? 0:position;
    currentDate = monthArray[position];
   } else {
    currentDate = Number(currentDate) + 1;
   }
  } else {
   if (currentModel == "week") {
    position = $.inArray(currentDate, monthArray) - 1;
    position = position < 0? 6:position;
    currentDate = monthArray[position];
   } else {
    currentDate = Number(currentDate) - 1;
   }
  }
  $("#displayModel").val(currentDate);
  refreshTable(currentModel, currentDate);
});

$("#monthTab").addClass("selected");
var currentSystemDate = new Date();
var currentWeek = "1st";
var currentYear = currentSystemDate.getFullYear();
var currentMonth = monthArray[currentSystemDate.getMonth()];
$.each(quarterArray, function(i,n) {
  var monthPosition = $.inArray(currentMonth, n);
  if (monthPosition != -1) {

  }
});
$("#displayModel").val(currentMonth);
refreshTable("month",currentMonth);
});

var monthArray = ["January","Febuary","March","April","May","June","July","August","September","October","November","December"];
var quarterArray = ["1st Quarter","2nd Quarter","3rd Quarter","4th Quarter"];
var weekArray = ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"];

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

3.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;}