日历仅对具有日期的单元格进行操作

我从这里得到了一个基本日历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 : '&nbsp;';
        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>