javascript - Creating a calendar in HTML -
i'm creating calendar in html part of school project.
so far i've created basics of page. i'd calendar, you're able create appointments, show (like basic calendar).
here i've made far (it's danish, don't think should problem. let me know if you'd 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 { 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, i've found online):
$(document).ready(function(){ $('table td').click(function(){ window.location = $(this).data('href'); return false; }); }); so far i've created calendar current month , following 2, since i'm doing them manually (if know how automate process i'd know well, it's not important thing). thing i'd is, when click 1 of <td> 's, represent days, popup window, or that, appears, i'm able type in details of appointment want add.
how could/should this? understanding, it'd difficult/impossible in html purely, problem is; don't know else basic html , php, , have never worked javascript, i'm in bit of tough spot.
let me know if need additional information, , i'll glad give whatever can.
thanks :-)
i've coded code need in jquery.
let row = $('tr'); row.each((index,row) =>{ // each row if(index !== 0) return; // want 1 entry of! $('td').each((index,day) => { // each day if($(day).hasclass('grayedout')) return; // skip grayed out days $(day).on('click',addapointment); // part care }); }) function addapointment() { let daynum = $(this).text(); let appointment = prompt(`what add appointment ${daynum}th?`); } daynum returns day number clicked on , appointment returns user wish add appointment. can use in php, luck.
Comments
Post a Comment