我有一个从这里得到的基本日历http://www.dynamicdrive.com/dynamicindex7/basiccalendar_dev.htm
我想通过将svg图像添加到仅包含日期的单元格来修改日历。
我在JavaScript中评论了我认为需要操作的内容。它是从底部开始的第5行。我尝试在该行的'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>';
}
CSS
.main {
border:0em solid black;
height:80%;
left: 2.5%;
opacity:.9;
position:fixed;
top:17%;
width:95%;
}
.month {
background:#D5273E;
background: -webkit-linear-gradient( to left bottom, #D5273E, #0096dd);
background: -moz-linear-gradient( to left bottom, #D5273E, #0096dd);
background: -ms-linear-gradient( to left bottom, #D5273E, #0096dd);
background: -o-linear-gradient( to left bottom, #D5273E, #0096dd);
background: linear-gradient( to left bottom, #D5273E, #0096dd);
border-radius:0.2em;
color:#000000;
font:bold 30px verdana;
height:1.5em;
}
.daysofweek {
background-color:#404040;
background: -webkit-linear-gradient( to left bottom, #161616, #404040);
background: -moz-linear-gradient( to left bottom, #161616, #404040);
background: -ms-linear-gradient( to left bottom, #161616, #404040);
background: -o-linear-gradient( to left bottom, #161616, #404040);
background: linear-gradient( to left bottom, #161616, #404040);
border-radius:0.2em;
color:#ffffff;
font:bold 1.5em verdana;
}
.days {
background-color: lightblue;
background-image: url("../Images/Rectangle.svg");
background:lightblue;
background: -webkit-linear-gradient( to left bottom, lightblue, white);
background: -moz-linear-gradient( to left bottom, lightblue, white);
background: -ms-linear-gradient( to left bottom, lightblue, white);
background: -o-linear-gradient( to left bottom, lightblue, white);
background: linear-gradient( to left bottom, lightblue, white);
border-radius: 0.2em;
color:black;
font:bold 1.6em verdana;
padding: 0.1%;
position: relative;
text-align:left;
vertical-align:top;
}
.days #today{
background-color:#0096dd;
border-radius:0.2em;
color: red;
font-weight: bold;
padding: 0.2%;
text-align:center;
}
#CellDate{
background-image: url("../Images/Rectangle.svg");
}
#CalendarBox{
background-repeat:no-repeat;
background-position:center center;
background-size: 100% 100%, auto;
border: solid black 0.1em;
border-radius:.3em;
height:4em;
left:20%;
position:absolute;
top:5%;
width: 6em;
}
HTML
<!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
<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>
答案 0 :(得分：0)
我需要重新编写JavaScript页面底部的第5行到...
t += (x != " " ? '<td id="CellDate" class="' : '<td class="') + cD + '" >' + x + '</td>';