日历页面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="dutyDetails.aspx.cs" Inherits="emergency_dutyinfo_dutyDetails" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>值班信息详情</title>
<style type="text/css">
/*div #dataTextContainer {
border: 1px #A5ACB2 solid;
width: 1400px;
height: 1000px;
text-align: right;
float: left;
}*/
#text {

/*width: 1400px;
height: 1000px;*/
}
#title {
width: 100%;
height: 10%;
font-family: 'Microsoft YaHei';
font-size: 30px;
color: #364452;
text-align: center;
margin-top: 10px;
font-weight: bold;
}

#dataTextContainer {
width: 100%;
height: 10%;
font-family: 'Microsoft YaHei';
font-size: 30px;
color: #333333;
margin-left:20px;
}

div #calendarContainer {
width: 100%;
height: 70%;
text-align: center;
}
</style>
<script type="text/javascript" src="inputDate.js"></script>
</head>
<body style="height:100%;overflow-x:hidden;">
<div id="text">
<div id="title">值班表</div>
<div id="dataTextContainer"></div>

drawCalendar();
}
function closeCalendar() {

var oCalendarContainer = document.getElementById("calendarContainer");
oCalendarContainer.innerHTML = "";
}
function drawCalendar(sYear, sMonth) {
document.getElementById('text').style.width = window.screen.width;
document.getElementById('text').style.height = window.screen.height;
var newDate = new Date;
var odate = document.getElementById("dataTextContainer");
var date_year = newDate.getFullYear();
var date_month = newDate.getMonth() + 1;
var date_today = newDate.getDate();
odate.value = date_year + "-" + date_month + "-" + date_today;

var newDate;
if (arguments[0] == null || arguments[1] == null) {
newDate = new Date();
}
else {
newDate = new Date(sYear, sMonth - 1);
}

var date_year = newDate.getFullYear();
var date_month = newDate.getMonth() + 1;
var date_today = newDate.getDate();
var date_day = newDate.getDay();

var nextMonth = date_month + 1;
var nextYear = date_year;
var prevMonth = date_month - 1;
var prevYear = date_year;

if (sMonth == 12) {
nextMonth = 1;
nextYear = date_year + 1;
}
if (sMonth == 1) {
prevMonth = 12;
prevYear = date_year - 1;
}
var imgWidth = window.screen.width - 36;
var calendarTable = "";
//两个图标
calendarTable += '<div width=' + imgWidth + ' height="10%" style="text-align:center;margin:1%;">';
//calendarTable += ' <div style="background-color:rgb(211,236,239);width:100%;height:10%;">';
////向前翻年
//calendarTable += '<td colspan="2" onclick="javascript:drawCalendar(' + (prevYear - 1) + ',' + prevMonth + ');"' +
// ' style="cursor:pointer;background-color:rgb(211,236,239);"><<<</td>';
//向前翻月
calendarTable += '<div onclick="javascript:drawCalendar(' + prevYear + ',' + prevMonth + ');"' +
' style="cursor:pointer;background-color:rgb(211,236,239);width:50%;height:100%;float:left"><img src="../../Images/click.png" /></div>';
//向后翻月
calendarTable += '<div onclick="javascript:drawCalendar(' + nextYear + ',' + nextMonth + ');"' +
' style="cursor:pointer;background-color:rgb(211,236,239);width:48%;height:100%;float:left"><img src="../../Images/unclick.png" /></div>';
////向后翻年
//calendarTable += '<td colspan="1" onclick="javascript:drawCalendar(' + (nextYear + 1) + ',' + nextMonth + ');"' +
// ' style="cursor:pointer;background-color:rgb(211,236,239);">>>></td>';
calendarTable += ' </div>';
document.getElementById('dataTextContainer').innerHTML = date_year + '年' + date_month + '月';

//星期表头
calendarTable += ' <div style="width:100%;height:10%">';
calendarTable += ' <div style="width:12%;height:70%;background-color:rgb(179,224,247);margin:1%;font-size:20px;color:#484848;font-family:Microsoft YaHei;float:left">星期日</div>';
calendarTable += ' <div style="width:12%;height:70%;background-color:rgb(179,224,247);margin:1%;font-size:20px;color:#484848;font-family:Microsoft YaHei;float:left">星期一</div>';
calendarTable += ' <div style="width:12%;height:70%;background-color:rgb(179,224,247);margin:1%;font-size:20px;color:#484848;font-family:Microsoft YaHei;float:left">星期二</div>';
calendarTable += ' <div style="width:12%;height:70%;background-color:rgb(179,224,247);margin:1%;font-size:20px;color:#484848;font-family:Microsoft YaHei;float:left">星期三</div>';
calendarTable += ' <div style="width:12%;height:70%;background-color:rgb(179,224,247);margin:1%;font-size:20px;color:#484848;font-family:Microsoft YaHei;float:left">星期四</div>';
calendarTable += ' <div style="width:12%;height:70%;background-color:rgb(179,224,247);margin:1%;font-size:20px;color:#484848;font-family:Microsoft YaHei;float:left">星期五</div>';
calendarTable += ' <div style="width:12%;height:70%;background-color:rgb(179,224,247);margin:1%;font-size:20px;color:#484848;font-family:Microsoft YaHei;float:left">星期六</div>';
calendarTable += ' </div>';

//计算一个月内的天数,注意闰月
var dayNum_in_month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var isleapyear = date_year % 4;
if (isleapyear == 0) {
dayNum_in_month[1] = 29;
}
var month_alldays = dayNum_in_month[date_month - 1];

//计算行数，line_top表示当前日期上面的行数，包括当前行；line_bot表示当前日期下面的行数，不包括当前行
var line_top;
var line_bot;
if ((date_today - date_day + 1) % 7 != 0) {
line_top = Math.floor((date_today - date_day + 1) / 7) + 1;
}
else {
line_top = Math.floor((date_today - date_day + 1) / 7);
}

if ((30 - date_today + date_day + 1) % 7 != 0) {
line_bot = Math.floor((30 - date_today + date_day + 1) / 7) + 1;
}
else {
line_bot = Math.floor((30 - date_today + date_day + 1) / 7);
}

//定义一个二维数组，预备一个6*7的数组，数组中每个元素对应一个单元格(日期)
var dateList = new Array([""], [""], [""], [""], [""], [""], [""]);
var dateCell = '<div width:100%;height:80%;>';

var arr = ['值班人员:钱玉[00:00至24:00]', '值班人员:王军[00:00至24:00]', '值班人员:孙思[00:00至24:00]', '值班人员:许攸[00:00至24:00]', '值班人员:李来源[00:00至24:00]', '值班人员:张永刚[00:00至24:00]', '值班人员:陈超[00:00至24:00]'];

for (var i = 1; i < 7; i++) {
//i是行数
//calendarTable += ' <div width:100%;height:80%;>';
for (var j = 0; j < 7; j++) {
//j是列数
dateList[i][j] = date_today - 7 * (line_top - i + 1) + j - date_day;
//如果武器<=0，置空
if ((date_today - 7 * (line_top - i + 1) + j - date_day) <= 0) {
dateList[i][j] = " ";
}
//如果日期大于月总天数，则不显示
if ((date_today - 7 * (line_top - i + 1) + j - date_day) > month_alldays) {
dateList[i][j] = " ";
}

if (dateList[i][j] != " ") {
//如果单元格不是空，那么可以设置其触发三个事件，共有三个事件
//1、单击事件，将当前日期写入文本框
//2、鼠标指针移到单元格上，改变背景
//3、鼠标指针离开单元格，背景复原
if (dateList[i][j] == date_today) {
dateCell =
'<div onclick="javascript:setDateText(' + date_year + ',' + date_month + ',this.firstChild.nodeValue);"' + 'onmouseover="javascript:setFocus(this);"' + ' onmouseout="javascript:setFocusOut(this);"' + ' style="cursor:pointer;color:#30b3cf;font-size:18px;font-family:Microsoft YaHei;background-color:#677983;width:12%;height:17%;float:left;margin:1%;text-align:center;">' + dateList[i][j] + '<br /><br />' + arr[j] + '</div>' + '</div>';
}
else {
dateCell =
'<div onclick="javascript:setDateText(' + date_year + ',' + date_month + ',this.firstChild.nodeValue);"' + 'onmouseover="javascript:setFocus(this);"' + ' onmouseout="javascript:setFocusOut(this);"' + ' style="cursor:pointer;color:6e6d6d;font-size:18px;font-family:Microsoft YaHei;background-color:rgb(230,230,230);width:12%;height:17%;float:left;margin:1%;text-align:center;">' + dateList[i][j] + '<br /><br />' + arr[j] + '</div>' + '</div>';
}

//if (i == line_top && j == line_bot) {
// dateCell =
// '<td onclick="javascript:setDateText(' + date_year + ',' + date_month + ',this.firstChild.nodeValue);"' + 'onmouseover="javascript:setFocus(this);"' + ' onmouseout="javascript:setFocusOut(this);"' + ' style="cursor:pointer;background-color:#FF6600;">' + dateList[i][j] + '<br /><br />' + '<div class="dv3">' + arr[j] + '</div>' + '</td>';

//}
}
else {
dateCell = "<div style=cursor:pointer;color:6e6d6d;font-size:22px;font-family:Microsoft YaHei;background-color:rgb(230,230,230);width:12%;height:17%;float:left;margin:18px;text-align:center;> </div>";
}
dateCell += '</div>';
calendarTable += dateCell;
}
//calendarTable += '</div>';
}
//calendarTable += '<tr><td colspan="7"' + 'onclick="javascript:closeCalendar();"' + 'style="background-color#339999;cursor:pointer;color:red;font-weight:bold">' + '关闭(' + date_year + "年" + date_month + "月" + ')</td></tr>';
//calendarTable += '</div>';

//将日期写入
var oCalendarContainer = document.getElementById("calendarContainer");
oCalendarContainer.innerHTML = calendarTable;
}

//当鼠标指针指到当前日期单元格
function setFocus(obj) {
obj.style.backgroundColor = "rgb(247,146,247)";
}
//当鼠标指针离开当前日期单元格
function setFocusOut(obj) {
obj.style.backgroundColor = "rgb(230,230,230)";
}
//鼠标单击当前单元格
function setDateText(sYear, sMonth, sDate) {
var oDateText = document.getElementById("dateText");
oDateText.value = sYear + "-" + sMonth + "-" + sDate;
}

</script>

posted @ 2017-02-21 09:31 brandon606106 阅读(460) 评论(1) 收藏举报

刷新页面返回顶部

brandon606106

日历页面

公告