Creating a calendar in HTML
Question
I'm currently creating a calendar in HTML as part of a school project.
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>
<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;
}
The small Javascript (I haven't learned Java yet, this was something I've found online):
$(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.
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; 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.
Let me know if you need any additional information, and I'll be glad to give you whatever I can.
Thanks :-)
1 answers
solution1
0 2017-02-27 19:19:24
I've coded up the code you need in 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. You can use that in your PHP, Good luck.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.