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

【问题标题】：Live Calendar using Javascript ( not any other language)使用 Javascript 的实时日历（不是任何其他语言）
【发布时间】：2017-06-16 19:03:17
【问题描述】：

我有一个仅使用 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>

【问题讨论】：

  • 用户采取了什么行动，javascript 做了什么？例如，当用户单击某个日期时，它会像这个日历一样突出显示，例如 7 月 1 日和 7 月 23 日。或者，如果单击时突出显示日期，它将失去突出显示
  • javascript 用于显示当前日期的实时日历，日期 1 和 23 有事件，当用户将鼠标悬停在它上面时，事件就像日期“23”一样弹出.就是这样，现在我想让我的日历自动更新当前日期>

标签： javascript html css calendar


【解决方案1】：

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

【讨论】：

  • @AbrarEAnjum 兄弟！你的问题非常不清楚。如果您想突出显示今天的日期，则不能在 7 月日历上显示，因为今天是 6 月。我稍微更改了您的 HTML，但我没有将日期与正确的日期匹配。它现在突出显示 6 月的日期以及当前日期。我编辑了 html、css 和 Javascript
  • 正是兄弟！这是我的错误，我错误地把它改成了“七月”而不是“六月”，抱歉给您带来不便......
  • 是的，兄弟明白，这是您的时区，但我如何设置我的时区（印度），即 UTC +5.30
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2015-11-06
  • 1970-01-01
  • 2016-05-06
  • 2016-03-20
  • 2013-12-13
  • 1970-01-01
  • 2012-03-31
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode