我对仅使用 html 和 css 创建的事件日历有一个基本设计。事件日期被赋予了不同的背景，每当用户将鼠标悬停在其上时，事件就会弹出。我有这一切。我真正的问题是拥有一个实时日历，它可以在不更改当前设计的情况下自行更新(日期(。除了javascript之外，不会使用其他语言。
请帮助我。
table{
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-style: italic;
font-size: 14px;
border-radius: 10px;
}
td.effect {
width:23px;
height:23px;
border-radius:50%;
border:none; }
table, td.header {
background: #fff;
background: -webkit-linear-gradient(#fff, #d3d3d3);
background: -o-linear-gradient(#fff, #d3d3d3);
background: -moz-linear-gradient(#fff, #d3d3d3);
background: linear-gradient(#fff, #d3d3d3);
}
td.event {
border-radius:50%;
background-color:#A29F9F;
border:none;
}
td.event:hover {
color:#F7EFEF;
background-color:#000000;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body></body>
<div style="float:left; margin-left:10px;" ><table cellpadding="0px" cellspacing="1" style="border-radius: 10px;" width="200" height="170" border="2" >
<tbody>
<tr align="center">
<td class="header" style="border-radius: 10px; border:none;" colspan="7"><strong>Event Calendar</strong></td>
</tr>
<tr align="center">
<td class="header" style="border-radius: 10px; border:none;" colspan="7"><strong>June 2017</strong></td></tr>
<tr align="center" bgcolor="black" style="color: #fff; font-style: bold;">
<td class="effect" width="15">S</td>
<td class="effect" width="15">M</td>
<td class="effect" width="18">T</td>
<td class="effect" width="18">W</td>
<td class="effect" width="18">T</td>
<td class="effect" width="18">F</td>
<td class="effect" width="18">S</td>
</tr>
<tr align="center">
<td class="effect"><img style="" src="logo without bakgorund.png" width="15" height="15" alt=""/></td>
<td class="effect" ><img src="logo without bakgorund.png" width="15" height="15" alt=""/></td>
<td class="effect" ><img src="logo without bakgorund.png" width="15" height="15" alt=""/></td>
<td class="effect" ><img src="logo without bakgorund.png" width="15" height="15" alt=""/></td>
<td class="event" >01</td>
<td class="effect" >02</td>
<td class="effect" >03</td>
</tr>
<tr align="center">
<td class="effect" >04</td>
<td class="effect" >05</td>
<td class="effect" >06</td>
<td class="effect" >07</td>
<td class="effect" >08</td>
<td class="effect" >09</td>
<td class="effect" >10</td>
</tr>
<tr align="center">
<td class="effect" >11</td>
<td class="effect" >12</td>
<td class="effect" >13</td>
<td class="effect" >14</td>
<td class="effect" >15</td>
<td class="effect" >16</td>
<td class="effect" >17</td>
</tr>
<tr align="center">
<td class="effect" >18</td>
<td class="effect" >19</td>
<td class="effect" >20</td>
<td class="effect" >21</td>
<td class="effect" >22</td>
<td class="event" title= " This is just an example of hovering effect" >23</td>
<td class="effect" >24</td>
</tr>
<tr align="center">
<td class="effect" >25</td>
<td class="effect" >26</td>
<td class="effect" >27</td>
<td class="effect" >28</td>
<td class="effect" >29</td>
<td class="effect" >30</td>
<td class="effect" ><img src="logo without bakgorund.png" width="15" height="15" alt=""/></td>
</tr>
</tbody>
</table>
</div>
</html>更新：我更改了HTML足够多，所以你可以得到这个想法。由于原始示例显示的是 7 月日历，而今天是 6 月，因此我更改了日历上的月份名称，但我没有重新排列网格上的日期。
我在 CSS 中添加了 .today 类。我不完全确定这是否是 OP 所要求的。
dates = ["2017-07-01","2017-07-23","2017-08-08","2017-07-12","2017-06-04","2017-06-29"]; // here are all your selected events
curYear = "2017"; // when displaying the calendar, set the year and month of the current calendar
curMo = "06";
dl = dates.length;
cells = document.getElementsByClassName('effect'),
cl = cells.length;
for(di=0; di<dl; di++){
darray = dates[di].split("-");
if ( curYear == darray[0] && curMo == darray[1]){
for(ci=0; ci<cl; ci++) {
cur = cells[ci];
if(cur.innerHTML == darray[2]){
cur.className += " event"; // you can take out the '+' if you want
}
}
}
}
dateObj = new Date();
todayMonth = pad(dateObj.getUTCMonth() + 1); //months from 1-12
todayDay = pad(dateObj.getUTCDate());
todayYear = dateObj.getUTCFullYear();
if ( curYear == todayYear && curMo == todayMonth){
for(i=0; i<cl; i++) {
cur = cells[i];
if(cur.innerHTML == todayDay){
cur.className += " today"; // you can take out the '+' if you want
}
}
}
function pad(x){ // add leading zeros
return (x.length < 2)? "0" + x: x;
}table{
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
font-style: italic;
font-size: 14px;
border-radius: 10px;
}
td.effect {
width:23px;
height:23px;
border-radius:50%;
border:none; }
table, td.header {
background: #fff;
background: -webkit-linear-gradient(#fff, #d3d3d3);
background: -o-linear-gradient(#fff, #d3d3d3);
background: -moz-linear-gradient(#fff, #d3d3d3);
background: linear-gradient(#fff, #d3d3d3);
}
td.event {
border-radius:50%;
background-color:#A29F9F;
border:none;
}
td.event:hover {
color:#F7EFEF;
background-color:#000000;
}
td.today { background-color: #9ff; }<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body></body>
<div style="float:left; margin-left:10px;" ><table cellpadding="0px" cellspacing="1" style="border-radius: 10px;" width="200" height="170" border="2" >
<tbody>
<tr align="center">
<td class="header" style="border-radius: 10px; border:none;" colspan="7"><strong>Event Calendar</strong></td>
</tr>
<tr align="center">
<td class="header" style="border-radius: 10px; border:none;" colspan="7"><strong>June 2017</strong></td></tr>
<tr align="center" bgcolor="black" style="color: #fff; font-style: bold;">
<td class="effect" width="15">S</td>
<td class="effect" width="15">M</td>
<td class="effect" width="18">T</td>
<td class="effect" width="18">W</td>
<td class="effect" width="18">T</td>
<td class="effect" width="18">F</td>
<td class="effect" width="18">S</td>
</tr>
<tr align="center">
<td class="effect"><img style="" src="logo without bakgorund.png" width="15" height="15" alt=""/></td>
<td class="effect" ><img src="logo without bakgorund.png" width="15" height="15" alt=""/></td>
<td class="effect" ><img src="logo without bakgorund.png" width="15" height="15" alt=""/></td>
<td class="effect" ><img src="logo without bakgorund.png" width="15" height="15" alt=""/></td>
<td class="effect" >01</td>
<td class="effect" >02</td>
<td class="effect" >03</td>
</tr>
<tr align="center">
<td class="effect" >04</td>
<td class="effect" >05</td>
<td class="effect" >06</td>
<td class="effect" >07</td>
<td class="effect" >08</td>
<td class="effect" >09</td>
<td class="effect" >10</td>
</tr>
<tr align="center">
<td class="effect" >11</td>
<td class="effect" >12</td>
<td class="effect" >13</td>
<td class="effect" >14</td>
<td class="effect" >15</td>
<td class="effect" >16</td>
<td class="effect" >17</td>
</tr>
<tr align="center">
<td class="effect" >18</td>
<td class="effect" >19</td>
<td class="effect" >20</td>
<td class="effect" >21</td>
<td class="effect" >22</td>
<td class="effect" title= " This is just an example of hovering effect" >23</td>
<td class="effect" >24</td>
</tr>
<tr align="center">
<td class="effect" >25</td>
<td class="effect" >26</td>
<td class="effect" >27</td>
<td class="effect" >28</td>
<td class="effect" >29</td>
<td class="effect" >30</td>
<td class="effect" ><img src="logo without bakgorund.png" width="15" height="15" alt=""/></td>
</tr>
</tbody>
</table>
</div>
</html>