Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript

Change Week In A Calendar When A Button Is Clicked

Post a Comment
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,

Solution 1:

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 = newDate();

    // your existing codelet 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()}`;
        } elseif (t < i) {
            weekday[i].innerHTML = `${d.getMonth()+1}/${d.getDate()+j}/${d.getFullYear()}`;
            j++
        } elseif (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();

Solution 2:

Just try this :)

<!DOCTYPE html><html><head><body><divid="wrapper"><divid="est-finish-dates"><table><tr><th>Sunday<br/>(<spanclass="weekday"></span>)</th><th>Monday<br/>(<spanclass="weekday"></span>)</th><th>Tuesday<br/>(<spanclass="weekday"></span>)</th><th>Wednesday<br/>(<spanclass="weekday"></span>)</th><th>Thursday<br/>(<spanclass="weekday"></span>)</th><th>Friday<br/>(<spanclass="weekday"></span>)</th><th>Saturday<br/>(<spanclass="weekday"></span>)</th></tr></table></div></div><buttononclick="nextWeek()">next week</button><script>functionrenderCalender(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()}`;
                 } elseif (t < i) {
                     weekday[i].innerHTML = `${d.getMonth()+1}/${d.getDate()+j}/${d.getFullYear()}`;
                     j++
                 } elseif (t === i) {
                     weekday[i].parentNode.style.backgroundColor = "rgb(100, 100, 100)";
                     weekday[i].innerHTML = `${d.getMonth()+1}/${d.getDate()}/${d.getFullYear()}`;
                 }
             }
             }



             functionchangeForm (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';
             }

             functionnextWeek(){
             var currentDate = newDate()
             currentDate.setTime(currentDate.getTime()+7*24*60*60*1000); //append date with 7 days and pass to render functionrenderCalender(currentDate);
             }
             renderCalender(newDate());

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

Post a Comment for "Change Week In A Calendar When A Button Is Clicked"