在 HTML 中创建日历
[英]Creating a calendar in HTML
问题描述
I'm currently creating a calendar in HTML as part of a school project.
我目前正在 HTML 中创建一个日历作为学校项目的一部分。
So far I've created the basics of the page.到目前为止，我已经创建了页面的基础知识。 What I'd like is a calendar, where you're able to create appointments, which will then show up (like a basic calendar).我想要的是一个日历，你可以在其中创建约会，然后会显示出来（就像一个基本的日历）。
Here is what I've made so far (It's is danish, but I don't think it should be a problem. Let me know if you'd like it translated though):这是我到目前为止所做的（它是丹麦语，但我认为这应该不是问题。如果你想翻译它，请告诉我）：
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: 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;
}
The small Javascript (I haven't learned Java yet, this was something I've found online):小的 Javascript（我还没有学过 Java，这是我在网上找到的）：
$(document).ready(function(){
$('table td').click(function(){
window.location = $(this).data('href');
return false;
});
});
So far I've only created a calendar for the current month and the following 2, since I'm doing them manually (if you know how to automate this process I'd like to know as well, but it's not the most important thing).到目前为止，我只为当月和下个月创建了一个日历，因为我是手动完成的（如果你知道如何自动化这个过程，我也想知道，但这不是最重要的事情）。 The thing I'd like is, when I click one of the <td> 's, that represent the days, a popup window, or something like that, appears, where I'm able to type in the details of the appointment I want to add.我想要的是，当我单击代表日期的<td>之一时，会出现一个弹出窗口或类似的东西，我可以在其中输入约会的详细信息想补充。
How could/should I do this?我怎么能/应该这样做？ From my understanding, it'd be difficult/impossible to do in HTML purely, which is where my problem is;根据我的理解，纯 HTML 很难/不可能，这就是我的问题所在； I don't know anything else than basic HTML and PHP, and have never worked with Javascript, so I'm in a bit of a tough spot.除了基本的 HTML 和 PHP 之外，我一无所知，并且从未使用过 Javascript，所以我的处境有些困难。
Let me know if you need any additional information, and I'll be glad to give you whatever I can.如果您需要任何其他信息，请告诉我，我很乐意为您提供任何可以提供的信息。
Thanks :-)谢谢 ：-）
1 个解决方案
解决方案1
0 2017-02-27 19:19:24
I've coded up the code you need in jQuery.我已经在 jQuery 中编写了您需要的代码。
let row = $('tr');
row.each((index,row) =>{ // For each row
if(index !== 0) return; // We only want 1 entry of!
$('td').each((index,day) => { // For each day
if($(day).hasClass('grayedout')) return; // Skip grayed out days
$(day).on('click',addApointment); // The part we care about
});
})
function addApointment() {
let dayNum = $(this).text();
let appointment =
prompt(`What would you like to add for an appointment for the ${dayNum}th?`);
}
dayNum returns the day number that was clicked on and appointment returns what the user wish to add for his appointment. dayNum 返回被点击的天数，而约会则返回用户希望为他的约会添加的内容。 You can use that in your PHP, Good luck.你可以在你的 PHP 中使用它，祝你好运。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.