javascript - Event Calendar - how to add multiple <td> table elements -
i'm doing 'calendar event' app. after choosing day of week, times , short description can click on 'add event' button , add row table (not visible), don't know, how add cell it. trying add cell, grabbing '.event' class var eventcontent = document.queryselectorall('.event'); , , use appendchild() method,
for(var j = 0; j < eventcontent.length; j +=1){ eventcontent[j].appendchild(tdelement1); eventcontent[j].appendchild(tdelement2); } but cells not inserting should be, after changing day of week. there html code:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>daily programmer challenge #0004 | events calendar</title> <link rel="stylesheet" href="css/0004_eventscalendar.css"> </head> <body> <div id="container"> <div class="toolbarmenu"> <div class="toolleft"> <div class="leftbuttons"> <button type="button"><span><</span></button> <button type="button"><span>></span></button> </div> <button type="button">today</button> </div> <div class="toolcenter"> <h2>test</h2> </div> </div> <hr> <div id="content"> <div id="leftside"> <table> <tbody> <tr class="eventhead"> <td class="dayhead" colspan="2"><span class="day">monday</span><span class="daydate"></span></td> </tr> <tr class="eventhead"> <td class="dayhead" colspan="2"><span class="day">tuesday</span><span class="daydate"></span></td> </tr> <tr class="eventhead"> <td class="dayhead" colspan="2"><span class="day">wednesday</span><span class="daydate"></span></td> </tr> <tr class="eventhead"> <td class="dayhead" colspan="2"><span class="day">thursday</span><span class="daydate"></span></td> </tr> <tr class="eventhead"> <td class="dayhead" colspan="2"><span class="day">friday</span><span class="daydate"></span></td> </tr> <tr class="eventhead"> <td class="dayhead" colspan="2"><span class="day">saturday</span><span class="daydate"></span></td> </tr> <tr class="eventhead"> <td class="dayhead" colspan="2"><span class="day">sunday</span><span class="daydate"></span></td> </tr> <!-- <tr class="event"> <td class="time"></td> <td class="desc"></td> </tr> --> </tbody> </table> <p><i><strong>note:</strong> after adding event table, can edit it!</i></p> </div> <div id="rigthside"> <h3>calendar panel</h3> <form id="calendarcms" name = "calendarcms" action="#"> <fieldset> <select name="dayofweek" id="dayofweek"> <option value="monday">monday</option> <option value="tuesday">tuesday</option> <option value="wednesday">wednesday</option> <option value="thursday">thursday</option> <option value="friday">friday</option> <option value="saturday">saturday</option> <option value="sunday">sunday</option> </select> <div id="fromtotime"> <span>from:</span> <select name="fromtime" id="fromtime"> <option value="07.00am">07:00am</option> <option value="07.15am">07:15am</option> <option value="07.30am">07:30am</option> <option value="07.45am">07:45am</option> <option value="08.00am">08:00am</option> <option value="08.15am">08:15am</option> <option value="08.30am">08:30am</option> <option value="08.45am">08:45am</option> <option value="09.00am">09:00am</option> <option value="09.15am">09:15am</option> <option value="09.30am">09:30am</option> <option value="09.45am">09:45am</option> <option value="10.00am">10:00am</option> <option value="10.15am">10:15am</option> <option value="10.30am">10:30am</option> <option value="10.45am">10:45am</option> <option value="11.00am">11:00am</option> <option value="11.15am">11:15am</option> <option value="11.30am">11:30am</option> <option value="11.45am">11:45am</option> <option value="12.00am">12:00am</option> <option value="12.15am">12:15am</option> <option value="12.30am">12:30am</option> <option value="12.45am">12:45am</option> <option value="13.00pm">13:00pm</option> <option value="13.15pm">13:15pm</option> <option value="13.30pm">13:30pm</option> <option value="13.45pm">13:45pm</option> <option value="14.00pm">14:00pm</option> <option value="14.15pm">14:15pm</option> <option value="14.30pm">14:30pm</option> <option value="14.45pm">14:45pm</option> <option value="15.00pm">15:00pm</option> <option value="15.15pm">15:15pm</option> <option value="15.30pm">15:30pm</option> <option value="15.45pm">15:45pm</option> <option value="16.00pm">16:00pm</option> <option value="16.15pm">16:15pm</option> <option value="16.30pm">16:30pm</option> <option value="16.45pm">16:45pm</option> <option value="17.00pm">17:00pm</option> <option value="17.15pm">17:15pm</option> <option value="17.30pm">17:30pm</option> <option value="17.45pm">17:45pm</option> <option value="18.00pm">18:00pm</option> <option value="18.15pm">18:15pm</option> <option value="18.30pm">18:30pm</option> <option value="18.45pm">18:45pm</option> <option value="19.00pm">19:00pm</option> <option value="19.15pm">19:15pm</option> <option value="19.30pm">19:30pm</option> <option value="19.45pm">19:45pm</option> <option value="20.00pm">20:00pm</option> <option value="20.15pm">20:15pm</option> <option value="20.30pm">20:30pm</option> <option value="20.45pm">20:45pm</option> <option value="21.00pm">21:00pm</option> <option value="21.15pm">21:15pm</option> <option value="21.30pm">21:30pm</option> <option value="21.45pm">21:45pm</option> <option value="22.00pm">22:00pm</option> <option value="22.15pm">22:15pm</option> <option value="22.30pm">22:30pm</option> <option value="22.45pm">22:45pm</option> <option value="23.00pm">23:00pm</option> <option value="23.15pm">23:15pm</option> <option value="23.30pm">23:30pm</option> <option value="23.45pm">23:45pm</option> <option value="00.00am">00:00am</option> <option value="00.15am">00:15am</option> <option value="00.30am">00:30am</option> <option value="00.45am">00:45am</option> <option value="01.00am">01:00am</option> <option value="01.15am">01:15am</option> <option value="01.30am">01:30am</option> <option value="01.45am">01:45am</option> <option value="02.00am">02:00am</option> <option value="02.15am">02:15am</option> <option value="02.30am">02:30am</option> <option value="02.45am">02:45am</option> <option value="03.00am">03:00am</option> <option value="03.15am">03:15am</option> <option value="03.30am">03:30am</option> <option value="03.45am">03:45am</option> <option value="04.00am">04:00am</option> <option value="04.15am">04:15am</option> <option value="04.30am">04:30am</option> <option value="04.45am">04:45am</option> <option value="05.00am">05:00am</option> <option value="05.15am">05:15am</option> <option value="05.30am">05:30am</option> <option value="05.45am">05:45am</option> <option value="06.00am">06:00am</option> <option value="06.15am">06:15am</option> <option value="06.30am">06:30am</option> <option value="06.45am">06:45am</option> </select> <span>to:</span> <select name="totime" id="totime"> <option value="07.00am">07:00am</option> <option value="07.15am">07:15am</option> <option value="07.30am">07:30am</option> <option value="07.45am">07:45am</option> <option value="08.00am">08:00am</option> <option value="08.15am">08:15am</option> <option value="08.30am">08:30am</option> <option value="08.45am">08:45am</option> <option value="09.00am">09:00am</option> <option value="09.15am">09:15am</option> <option value="09.30am">09:30am</option> <option value="09.45am">09:45am</option> <option value="10.00am">10:00am</option> <option value="10.15am">10:15am</option> <option value="10.30am">10:30am</option> <option value="10.45am">10:45am</option> <option value="11.00am">11:00am</option> <option value="11.15am">11:15am</option> <option value="11.30am">11:30am</option> <option value="11.45am">11:45am</option> <option value="12.00am">12:00am</option> <option value="12.15am">12:15am</option> <option value="12.30am">12:30am</option> <option value="12.45am">12:45am</option> <option value="13.00pm">13:00pm</option> <option value="13.15pm">13:15pm</option> <option value="13.30pm">13:30pm</option> <option value="13.45pm">13:45pm</option> <option value="14.00pm">14:00pm</option> <option value="14.15pm">14:15pm</option> <option value="14.30pm">14:30pm</option> <option value="14.45pm">14:45pm</option> <option value="15.00pm">15:00pm</option> <option value="15.15pm">15:15pm</option> <option value="15.30pm">15:30pm</option> <option value="15.45pm">15:45pm</option> <option value="16.00pm">16:00pm</option> <option value="16.15pm">16:15pm</option> <option value="16.30pm">16:30pm</option> <option value="16.45pm">16:45pm</option> <option value="17.00pm">17:00pm</option> <option value="17.15pm">17:15pm</option> <option value="17.30pm">17:30pm</option> <option value="17.45pm">17:45pm</option> <option value="18.00pm">18:00pm</option> <option value="18.15pm">18:15pm</option> <option value="18.30pm">18:30pm</option> <option value="18.45pm">18:45pm</option> <option value="19.00pm">19:00pm</option> <option value="19.15pm">19:15pm</option> <option value="19.30pm">19:30pm</option> <option value="19.45pm">19:45pm</option> <option value="20.00pm">20:00pm</option> <option value="20.15pm">20:15pm</option> <option value="20.30pm">20:30pm</option> <option value="20.45pm">20:45pm</option> <option value="21.00pm">21:00pm</option> <option value="21.15pm">21:15pm</option> <option value="21.30pm">21:30pm</option> <option value="21.45pm">21:45pm</option> <option value="22.00pm">22:00pm</option> <option value="22.15pm">22:15pm</option> <option value="22.30pm">22:30pm</option> <option value="22.45pm">22:45pm</option> <option value="23.00pm">23:00pm</option> <option value="23.15pm">23:15pm</option> <option value="23.30pm">23:30pm</option> <option value="23.45pm">23:45pm</option> <option value="00.00am">00:00am</option> <option value="00.15am">00:15am</option> <option value="00.30am">00:30am</option> <option value="00.45am">00:45am</option> <option value="01.00am">01:00am</option> <option value="01.15am">01:15am</option> <option value="01.30am">01:30am</option> <option value="01.45am">01:45am</option> <option value="02.00am">02:00am</option> <option value="02.15am">02:15am</option> <option value="02.30am">02:30am</option> <option value="02.45am">02:45am</option> <option value="03.00am">03:00am</option> <option value="03.15am">03:15am</option> <option value="03.30am">03:30am</option> <option value="03.45am">03:45am</option> <option value="04.00am">04:00am</option> <option value="04.15am">04:15am</option> <option value="04.30am">04:30am</option> <option value="04.45am">04:45am</option> <option value="05.00am">05:00am</option> <option value="05.15am">05:15am</option> <option value="05.30am">05:30am</option> <option value="05.45am">05:45am</option> <option value="06.00am">06:00am</option> <option value="06.15am">06:15am</option> <option value="06.30am">06:30am</option> <option value="06.45am">06:45am</option> </select> </div> <textarea name="eventdesc" id="eventdesc" cols="45" rows="10" placeholder="please write description event details"></textarea> <input type="submit" value="add event"> </fieldset> <div id="error"></div> </form> </div> </div> </div> <script src="js/0004_eventscalendar.js"></script> </body> </html> javascript code:
//self-executing function protect our local variables (function(){ // current date var curentdate = new date(); // set variable first day of week (monday) var firstday = (curentdate.getdate() - (curentdate.getday()-1)); // array of months var allmonths = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"] // loop through last day (friday) of curent week for(var = 0; < 7; +=1){ var lastday = firstday + i; } // add date dom element (h2 tag) document.queryselector('h2').innerhtml = allmonths[curentdate.getmonth()] + ' ' + firstday + ' - ' + lastday + ', ' + curentdate.getfullyear(); // dom nodes class name ('.daydate') var daydate = document.queryselectorall('.daydate'); // loop through nodes , add dom month, current date , year for(var = 0; < daydate.length; i+=1){ daydate[i].innerhtml = allmonths[curentdate.getmonth()] + ' ' + (firstday + i) + ', ' + curentdate.getfullyear(); } // assign form html element of calendar panel variables. '.fromtime' , '.totome' , names of <select> tag var fromtime = document.calendarcms.fromtime; var totime = document.calendarcms.totime; // function manipulating times (from: , to:), in calendar panel function changefromtime(e){ // triger when time in first pop-down menu '.fromtime' higher in second pop-down menu '.totime' // selectedindex number (position) of selected element in pop-down menu if(fromtime.selectedindex >= totime.selectedindex){ // loop throogh first pop-down menu 'fromtime', fromtime.selectedindex index curently selected element for(var = 0; <= fromtime.selectedindex; +=1){ // hide times in second pop-down menu 'totime' below times in '.fromtime' pop-down menu totime[i].style.display = 'none'; } // change position '.totime' pop-down menu index equal first pop-down menu '.frotime' return totime.selectedindex = i; } // triger when time in first pop-down menu '.fromtime' lower in second pop-down menu '.totime' if(fromtime.selectedindex <= totime.selectedindex){ // reverse (remove) styling when user change earlier time, removing styling elements // below curently selected index (i = fromtime.selectedindex) in '.fromtime' pop-down menu for(var = fromtime.selectedindex; < totime.selectedindex; +=1){ totime[i].removeattribute('style'); } // change position '.totime' pop-down menu index equal first pop-down menu '.frotime' return totime.selectedindex = fromtime.selectedindex; } } // function use add/remove calendar events function addevent(e){ //event triger when user press submit 'add event' button if(e.target.type === 'submit'){ // prevent submit button default behavior e.preventdefault(); // assign couple of variables var textarea = document.queryselector('textarea'); var eventhead = document.queryselectorall('.eventhead'); var trelement = document.createelement('tr'); trelement.classname = 'event'; var eventdesc = document.queryselectorall('.desc'); var eventtime = document.queryselectorall('.time'); var errmsg = document.queryselector('#error'); errmsg.style.color = "red"; // loop through description field in html table for(var = 0; < eventhead.length; i+=1){ // trigger when option in index in 'dayofweek' pop-down menu match index of description field if(document.calendarcms.dayofweek.selectedindex === i){ // if textarea in html empty, error msg pop out, blocking user adding event if(textarea.value === ''){ // error msg show when user doesn't fill necessary details errmsg.innerhtml = 'please fill fields'; return; } else{ // if require filed filled /* // after description of event added table, editable eventdesc[i].contenteditable = true; // after times of event added table, editable eventtime[i].contenteditable = true; */ eventhead[i].parentnode.insertbefore(trelement.clonenode(true), eventhead[i].nextelementsibling); var eventcontent = document.queryselectorall('.event'); var tdelement1 = document.createelement('td'); var tdelement2 = document.createelement('td'); tdelement1.classname = 'time'; tdelement2.classname = 'desc'; for(var j = 0; j < eventcontent.length; j +=1){ eventcontent[j].appendchild(tdelement1); eventcontent[j].appendchild(tdelement2); } // reset field in calendar panel fromtime.selectedindex = 0; totime.selectedindex = 0; textarea.value = ''; errmsg.innerhtml = ''; } } } } } // function higlight current day of week function todayday(e){ // triger when user click 'today' button if(e.target.textcontent === 'today'){ var focusevent = document.queryselectorall('.event'); // loop through find current day of week , highliht for(var = 0; < focusevent.length; +=1){ if(curentdate.getday() === i){ focusevent[i-1].style.background = 'yellow'; } } } } // events listeners document.queryselector('#calendarcms').addeventlistener('click', addevent, false); document.queryselector('#fromtime').addeventlistener('change', changefromtime, false); document.queryselector('.toolleft').addeventlistener('click', todayday, false); })();
i not apprehend attempt commented tr class "event". want achieve (at least inferring description) can done declaring addevent :
function addevent(e){ //event triger when user press submit 'add event' button if(e.target.type === 'submit'){ // prevent submit button default behavior e.preventdefault(); // assign couple of variables var textarea = document.queryselector('textarea'); var eventhead = document.queryselectorall('.eventhead'); var trelement = document.createelement('tr'); trelement.classname = 'event'; var eventdesc = document.queryselectorall('.desc'); var eventtime = document.queryselectorall('.time'); var errmsg = document.queryselector('#error'); errmsg.style.color = "red"; // loop through description field in html table for(var = 0; < eventhead.length; i+=1){ // trigger when option in index in 'dayofweek' pop-down menu match index of description field if(document.calendarcms.dayofweek.selectedindex === i){ // if textarea in html empty, error msg pop out, blocking user adding event if(textarea.value === ''){ // error msg show when user doesn't fill necessary details errmsg.innerhtml = 'please fill fields'; return; } else{ // if require filed filled /* // after description of event added table, editable eventdesc[i].contenteditable = true; // after times of event added table, editable eventtime[i].contenteditable = true; */ var newtr = trelement.clonenode(true); eventhead[i].parentnode.insertbefore(newtr, eventhead[i].nextelementsibling); var eventcontent = document.queryselectorall('.event'); var tdelement1 = document.createelement('td'); var tdelement2 = document.createelement('td'); tdelement1.innertext=fromtime.value + " - " + totime.value; tdelement2.innertext=textarea.value; tdelement1.classname = 'time'; tdelement2.classname = 'desc'; for(var j = 0; j < eventcontent.length; j +=1){ newtr.appendchild(tdelement1); newtr.appendchild(tdelement2); } // reset field in calendar panel fromtime.selectedindex = 0; totime.selectedindex = 0; textarea.value = ''; errmsg.innerhtml = ''; } } } } } you can try here : https://jsfiddle.net/dn9v5qf9/
wiki
Comments
Post a Comment