Javascript 仅对带有日期的单元格进行日历操作
我有一个从这里得到的基本日历Javascript 仅对带有日期的单元格进行日历操作,javascript,html,css,svg,dom-events,Javascript,Html,Css,Svg,Dom Events,我有一个从这里得到的基本日历 我想修改日历,只在包含日期的单元格中添加svg图像 我在JavaScript中注释了我认为需要处理的行。这是从底部算起的第五行。我尝试在那行的“td”中添加一个Id,但这也影响了那些没有日期的单元格 需要做什么才能分离出有日期的细胞?有什么想法吗?谢谢你的帮助 JavaScript var todaydate = new Date() var curmonth = todaydate.getMonth() + 1 //get current month (1-12)
我想修改日历,只在包含日期的单元格中添加svg图像 我在JavaScript中注释了我认为需要处理的行。这是从底部算起的第五行。我尝试在那行的“td”中添加一个Id,但这也影响了那些没有日期的单元格 需要做什么才能分离出有日期的细胞?有什么想法吗?谢谢你的帮助 JavaScript
var todaydate = new Date()
var curmonth = todaydate.getMonth() + 1 //get current month (1-12)
var prevmonth = todaydate.getMonth() - 1 //get current month (1-12)
var curyear = todaydate.getFullYear() //get current year
document.write(buildCal(curmonth, curyear, "main", "month", "daysofweek", "days", 1));
function buildCal(m, y, cM, cH, cDW, cD, brdr) {
var mn = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
var dim = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
var oD = new Date(y, m - 1, 1); //DD replaced line to fix date bug when current day is 31st
oD.od = oD.getDay() + 1; //DD replaced line to fix date bug when current day is 31st
var todaydate = new Date() //DD added
var scanfortoday = (y == todaydate.getFullYear() && m == todaydate.getMonth() + 1) ? todaydate.getDate() : 0 //DD added
dim[1] = (((oD.getFullYear() % 100 != 0) && (oD.getFullYear() % 4 == 0)) || (oD.getFullYear() % 400 == 0)) ? 29 : 28;
var t = '<div class="' + cM + '"><table class="' + cM + '" cols="7" cellpadding="0" border="' + brdr + '" cellspacing="0"><tr align="center">';
t += '<td colspan="7" align="center" class="' + cH + '">' + mn[m - 1] + ' - ' + y + '</td></tr><tr align="center">';
for (s = 0; s < 7; s++) t += '<td class="' + cDW + '">' + "SMTWTFS".substr(s, 1) + '</td>';
t += '</tr><tr align="center">';
for (i = 1; i <= 42; i++) {
var x = ((i - oD.od >= 0) && (i - oD.od < dim[m - 1])) ? i - oD.od + 1 : ' ';
if (x == scanfortoday) //DD added
x = '<span id="today">' + x + '</span>' //DD added
t += '<td id="CellDate" class="' + cD + '" >' + x + '</td>';//// this is where the date values appear in the cells, this is where we need to insert the svg
if (((i) % 7 == 0) && (i < 36)) t += '</tr><tr align="center" >';
}
return t += '</tr></table></div>';
}
HTML
安全事故日历
安全事故日历
自上次事件以来的天数:
45
SVG
一天
傍晚
我需要将JavaScript页面底部的第5行重新写入
t += (x != " " ? '<td id="CellDate" class="' : '<td class="') + cD + '" >' + x + '</td>';
t+=(x!=“”?'
<!DOCTYPE html>
<head>
<?xml version="1.0" standalone="no"?>
<meta charset="UTF-8" content="HTML,CSS,XML,JavaScript">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Safety Incident Calendar</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Fullscreen Background Image Slideshow with CSS3 - A Css-only fullscreen background image slideshow" />
<meta name="keywords" content="css3, css-only, fullscreen, background, slideshow, images, content" />
<meta name="author" content="Codrops" />
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script src="Scripts/Global.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/modernizr.custom.86080.js"></script>
<script src="Scripts/calendar.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="Styles/Design.css" />
<link rel="stylesheet" type="text/css" href="Styles/SlideShow.css" />
</head>
<body id="page">
<center>
<h1 class="safetyScreenHeader">Safety Incident Calendar</h1>
<h3 id ="calendarText">Number of Days since the last incident:</h3>
<div id="safetyValueTV" >45</div>
<div id="safetyheaderIcon"></div>
<div id="tv1clock"></div>
</center>
<object data="Images/Rectangle.svg" type="image/svg+xml" id="CalendarBox" />
</body>
</html>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d='M0 0 L0 63 L100 0 ' fill='#FF0000' />
<text x="2" y="13" fill="blue">Day</text>
<path d='M100 0 L0 63 L100 63 ' fill='#98FB98' />
<text x="40" y="60" fill="blue">Evening</text>
</svg>
t += (x != " " ? '<td id="CellDate" class="' : '<td class="') + cD + '" >' + x + '</td>';