Change week in a calendar when a button is clicked

Question

I want to design a weekly calendar and which will change to next week when I click the button. I copied the code from the website but I do not know its meaning.

As an improvement, i want to show the next week when the button gets clicked. I do not know how to do it and kindly ask for your help.

let d = new Date();
let t = d.getDay();
        
let weekday = document.querySelectorAll(".weekday");
for (let i = 0, j = 1; i < weekday.length; i++) {
    let x = t-i;
    if (t > i) {
        weekday[i].innerHTML = `${d.getMonth()+1}/${d.getDate()-x}/${d.getFullYear()}`;
    } else if (t < i) {
        weekday[i].innerHTML = `${d.getMonth()+1}/${d.getDate()+j}/${d.getFullYear()}`;
        j++
    } else if (t === i) {
        weekday[i].parentNode.style.backgroundColor = "rgb(100, 100, 100)";
        weekday[i].innerHTML = `${d.getMonth()+1}/${d.getDate()}/${d.getFullYear()}`;
    }
}

function nextWeek() {
    //TODO
}

<div id="wrapper">
    <div id="est-finish-dates">
        <table>
            <tr>
                <th>Sunday<br/>(<span class="weekday"></span>)</th>
                <th>Monday<br/>(<span class="weekday"></span>)</th>
                <th>Tuesday<br/>(<span class="weekday"></span>)</th>
                <th>Wednesday<br/>(<span class="weekday"></span>)</th>
                <th>Thursday<br/>(<span class="weekday"></span>)</th>
                <th>Friday<br/>(<span class="weekday"></span>)</th>
                <th>Saturday<br/>(<span class="weekday"></span>)</th>
            </tr>
        </table>
    </div>
</div>
            
<button onclick="nextWeek()">next week</button>

Removed a part of the JS, that was clearly not part of the code for this question and rewrote your text. You still need to do some research first, before we are able to help you. StackOverflow is not a code service plattform! — Philipp Maurer, Mar 16 '18 at 09:34

score 0 · Answer 1 · answered Mar 16 '18 at 09:12

You need to increment the value of d using one of the methods described at Incrementing a date in JavaScript

You'll need to implement the nextWeek() method you have referenced in your button. Something like this should do it:

window.nextWeek = function(){
    // Replace this with whatever method you are using to increment the date.
    let d = new Date();

    // your existing code
    let t = d.getDay();

    let weekday = document.querySelectorAll(".weekday");
    for (let i = 0, j = 1; i < weekday.length; i++) {
        let x = t-i;
        if (t > i) {
            weekday[i].innerHTML = `${d.getMonth()+1}/${d.getDate()-x}/${d.getFullYear()}`;
        } else if (t < i) {
            weekday[i].innerHTML = `${d.getMonth()+1}/${d.getDate()+j}/${d.getFullYear()}`;
            j++
        } else if (t === i) {
            weekday[i].parentNode.style.backgroundColor = "rgb(100, 100, 100)";
            weekday[i].innerHTML = `${d.getMonth()+1}/${d.getDate()}/${d.getFullYear()}`;
        }
    }
};

// Still need to run it the first time since it is in a function now.
nextWeek();

Note that you'll need to track your "current date" (probably `d`) outside of the nextWeek method if you want your button to work on the 2nd click. :-) — Johnny Fuery, Mar 16 '18 at 09:14

score 0 · Answer 2 · answered Mar 16 '18 at 09:18

Just try this :)

<!DOCTYPE html>
<html>
   <head>
   <body>
      <div id="wrapper">
         <div id="est-finish-dates">
            <table>
               <tr>
                  <th>Sunday<br/>(<span class="weekday"></span>)</th>
                  <th>Monday<br/>(<span class="weekday"></span>)</th>
                  <th>Tuesday<br/>(<span class="weekday"></span>)</th>
                  <th>Wednesday<br/>(<span class="weekday"></span>)</th>
                  <th>Thursday<br/>(<span class="weekday"></span>)</th>
                  <th>Friday<br/>(<span class="weekday"></span>)</th>
                  <th>Saturday<br/>(<span class="weekday"></span>)</th>
               </tr>
            </table>
         </div>
      </div>
      <button onclick="nextWeek()">next week</button>
      <script>
         function renderCalender(d){
          let t = d.getDay();
             let weekday = document.querySelectorAll(".weekday");
             for (let i = 0, j = 1; i < weekday.length; i++) {
                 let x = t-i;
                 if (t > i) {
                     weekday[i].innerHTML = `${d.getMonth()+1}/${d.getDate()-x}/${d.getFullYear()}`;
                 } else if (t < i) {
                     weekday[i].innerHTML = `${d.getMonth()+1}/${d.getDate()+j}/${d.getFullYear()}`;
                     j++
                 } else if (t === i) {
                     weekday[i].parentNode.style.backgroundColor = "rgb(100, 100, 100)";
                     weekday[i].innerHTML = `${d.getMonth()+1}/${d.getDate()}/${d.getFullYear()}`;
                 }
             }
             }



             function changeForm (form) {
                 let otherForms = document.querySelectorAll(".inquiry-selection-active");
                 for (let i = 0; i < otherForms.length; i++) {
                     otherForms[i].className = "inquiry-selection";
                 }

                 let commissionForm = document.getElementById(`${form.value}`);
                 commissionForm.className = 'inquiry-selection-active';
             }

             function nextWeek(){
             var currentDate = new Date()
             currentDate.setTime(currentDate.getTime()+7*24*60*60*1000); //append date with 7 days and pass to render function
             renderCalender(currentDate);
             }
             renderCalender(new Date());

      </script>
   </body>
</html>

thank you! I have already tried it but not response when I click the button. Please advice! — Shing Ysc, Mar 16 '18 at 09:33
Above code is working file just check this code in separate html file — Nishant Dixit, Mar 16 '18 at 09:46
it`s work. I got negative number when the first day is not Sunday. — Shing Ysc, Mar 16 '18 at 16:25

Change week in a calendar when a button is clicked

2 Answers2

Linked