CODEWITHSUNDEEP
javascriptcalendar
Jacqueline Scheidl
Jacqueline Scheidl

Reputation: 35

Get previous and next weeks from a calendar using JavaScript

I want to make a week planner, that displays all days of the week and the according date to it. And of course the month.

(Unfortunately, I don't have enough reputation to post a screenshot of what my calendar looks like.)

My JavaScript code looks like this. I found a part of it from Stack Overflow.

function calendar() {
    var today = new Date();
    var currYear = today.getFullYear();
    var currMonth = today.getMonth();
    var currWeek = today.getWeek()-1;

    var firstDateOfMonth = new Date(currYear, currMonth, 1);
    var firstDayOfMonth = firstDateOfMonth.getDay();    

    var firstDateOfWeek = new Date(firstDateOfMonth);

    firstDateOfWeek.setDate(
        firstDateOfWeek.getDate() +
        (firstDayOfMonth ? 7 - firstDayOfMonth : 0)
    );

    firstDateOfWeek.setDate(
        firstDateOfWeek.getDate() +
        7 * (currWeek-1)
    );


    var dateNumbersOfMonthOnWeek = [];
    var datesOfMonthOnWeek = [];

    for (var i = 0; i < 7; i++) {

        dateNumbersOfMonthOnWeek.push(
            firstDateOfWeek.getDate());

        datesOfMonthOnWeek.push(
            new Date(+firstDateOfWeek));

        firstDateOfWeek.setDate(
            firstDateOfWeek.getDate() + 1);

    }

    setText('month-year', monthArray[currMonth] + " " + currYear);

    setText('Mo', dateNumbersOfMonthOnWeek[0]);
    setText('Di', dateNumbersOfMonthOnWeek[1]);
    setText('Mi', dateNumbersOfMonthOnWeek[2]);
    setText('Do', dateNumbersOfMonthOnWeek[3]);
    setText('Fr', dateNumbersOfMonthOnWeek[4]);
    setText('Sa', dateNumbersOfMonthOnWeek[5]);
    setText('So', dateNumbersOfMonthOnWeek[6]);

};


function setText(id, val) {
    if(val < 10){
        val = '0' + val;
    }
    document.getElementById(id).innerHTML = val;

};


window.onload = calendar;

It works as it displays the correct days for the weekdays (so, 08 for this Monday, 09 for this Tuesdays, etc) and also the month is the correct one.

The question now is how to get the previous or next week? When I click on the "<" arrow I want to see the previous week. So how should I write the loop, which parameters does the method need, etc. I am very thankful for every hint, link, example etc.

Upvotes: 2

Views: 1274

Answers (1)

abhi312
abhi312

Reputation: 362

For next week-

var today = new Date();
var nextweek = new Date(today.getFullYear(), today.getMonth(), today.getDate()+7);

for more detail check following link:-

how to get next week date in javascript

Upvotes: 1

Related Questions