我目前在HTML中创建一个日历作为学校项目的一部分。在HTML中创建日历
到目前为止,我已经创建了页面的基础知识。我想要的是一个日历,您可以创建约会,然后显示(如基本日历)。
这里是我到目前为止做出(它是丹麦人,但我不认为它应该是一个问题,让我知道,如果你想它虽然翻译):
HTML:
<html>
<head>
<title>December</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="javascript.js"></script>
</head>
<body>
<div class="navigation">
<div id="forrige">
<a href="november.html">Forrige måned</a>
</div>
<div id="naeste">
<a href="januar.html">Næste måned</a>
</div>
</div>
<br><br>
<table class="ugedage">
<tr>
<th>Mandag</th>
<th>Tirsdag</th>
<th>Onsdag</th>
<th>Torsdag</th>
<th>Fredag</th>
<th>Lørdag</th>
<th>Søndag</th>
</tr>
<tr>
<td class="grayedout" data-href="#"><p>28</p></td>
<td class="grayedout" data-href="#"><p>29</p></td>
<td class="grayedout" data-href="#"><p>30</p></td>
<td class="dato" data-href="#">1</td>
<td class="dato" data-href="#">2</td>
<td class="dato" data-href="#">3</td>
<td class="dato" data-href="#">4</td>
</tr>
<tr>
<td class="dato" data-href="#">5</td>
<td class="dato" data-href="#">6</td>
<td class="dato" data-href="#">7</td>
<td class="dato" data-href="#">8</td>
<td class="dato" data-href="#">9</td>
<td class="dato" data-href="#">10</td>
<td class="dato" data-href="#">11</td>
</tr>
<tr>
<td class="dato" data-href="#">12</td>
<td class="dato" data-href="#">13</td>
<td class="dato" data-href="#">14</td>
<td class="dato" data-href="#">15</td>
<td class="dato" data-href="#">16</td>
<td class="dato" data-href="#">17</td>
<td class="dato" data-href="#">18</td>
</tr>
<tr>
<td class="dato" data-href="#">19</td>
<td class="dato" data-href="#">20</td>
<td class="dato" data-href="#">21</td>
<td class="dato" data-href="#">22</td>
<td class="dato" data-href="#">23</td>
<td class="dato" data-href="#">24</td>
<td class="dato" data-href="#">25</td>
</tr>
<tr>
<td class="dato" data-href="#">26</td>
<td class="dato" data-href="#">27</td>
<td class="dato" data-href="#">28</td>
<td class="dato" data-href="#">29</td>
<td class="dato" data-href="#">30</td>
<td class="dato" data-href="#">31</td>
<td class="grayedout" data-href="#"><p>1</p></td>
</tr>
<tr>
<td class="grayedout" data-href="#"><p>2</p></td>
<td class="grayedout" data-href="#"><p>3</p></td>
<td class="grayedout" data-href="#"><p>4</p></td>
<td class="grayedout" data-href="#"><p>5</p></td>
<td class="grayedout" data-href="#"><p>6</p></td>
<td class="grayedout" data-href="#"><p>7</p></td>
<td class="grayedout" data-href="#"><p>8</p></td>
</tr>
</table>
</body>
</html>
CSS:
.ugedage {
width: 95%;
margin-left: 2.5%;
margin-right: 2.5%;
}
.ugedage th {
border: 1px solid;
padding: 20px;
border-radius: 4px;
}
.ugedage td {
border: 1px solid;
border-radius: 4px;
padding: 20px;
padding-top: 0px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 10px;
text-align: right;
}
.grayedout {
background-color: #d3d3d3;
font-size: 12;
}
.dato {
color: black;
font-size: 12;
text-decoration: none;
}
td a {
display:block;
width:100%;
height: 100%;
}
.grayedout p {
color: gray;
font-size: 12;
text-decoration: none;
}
#forrige {
float: left;
margin-left: 1%;
}
#naeste {
float: right;
margin-right: 1%;
}
table td[data-href] {
cursor: pointer;
}
小的Javascript(我没有学过的Java然而,这件事情我已经在网上找到):
$(document).ready(function(){
$('table td').click(function(){
window.location = $(this).data('href');
return false;
});
});
到目前为止,我只创建了一个当前月份和以下2个日历,因为我手动执行了这些操作(如果您知道如何自动执行此过程,我也想知道,但它是不是最重要的东西)。 我想要的是,当我点击其中一个<td>
的代表日期时,出现一个弹出窗口或类似的东西,在那里我可以输入我想要的约会的详细信息加上。
我该怎么做/我该怎么做?根据我的理解,纯粹在HTML中完成是困难/不可能的,这是我的问题所在;除了基本的HTML和PHP之外我什么都不知道,并且从未使用过Javascript,所以我处于一个艰难的位置。
让我知道你是否需要任何额外的信息,我会很高兴给你任何我可以。
感谢:-)
Javascript和Java是不同的语言。只是说。 – abhishekkannojia
@abhishekkannojia我不知道,我会尽力纠正我的帖子。感谢:-) – Nico
这将是一个艰难的一个你probally应该需要一些JavaScript/jquery –