javascript - 使用 Javascript 的实时日历(不是任何其他语言)

标签 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>

最佳答案

更新:我对 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>

关于javascript - 使用 Javascript 的实时日历(不是任何其他语言)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44596292/

上一篇：css - Microsoft Edge 中未显示字体

下一篇：html - 试图让父容器随着内容的增加而增加高度

相关文章：

java - 解析 HTML - 仅获取表行的子集

javascript - 在父级的特定位置查找和元素的最快方法

javascript - 这个 JavaScript If 语句有什么问题？

html - HTML中不关闭标签和属性的实际问题是什么

javascript - JsPlumb' : if source `div ` is child of `div` with `position:absolute` -> targed endpint wrong drawn

html - flex 容器内单个元素的全宽

javascript - 填充可由 AJAX 调用选择的 jQuery UI

javascript - 获取元素的内部高度

jquery - 如何为 kendo.Window() 指定自定义 css 类？

javascript - JQuery 按钮将侧边菜单移动到左侧并使用动画将内容 View 调整为全宽不工作

©2024 IT工具网  联系我们