使用Javascript（不是任何其他语言）实时日历

时间：2017-06-16 19:03:17

标签： javascript html css calendar

我使用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>

1 个答案:

答案 0 :(得分：0)

更新：我已经足够改变HTML了，所以你可以得到这个想法。由于原始示例显示7月日历，今天是6月，我在日历上更改了月份名称，但我没有重新排列网格上的日期。

我在CSS中添加了.today类。我不完全确定这是OP所要求的。

＆＃13;
＆＃13; 
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;
 }
＆＃13; 
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; }
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题