如何将日历的开始日期布局从星期日更改为星期一？

Question

Hi I'm trying to learn JavaScript from this calendar example code by the author xMark. But his example uses Sunday as the first day of the week. I want it to show Monday as the first day of the week. So far I have only managed to change the header labels but not the dates' correct positions. https://codepen.io/xmark/pen/WQaXdv

So I've been trying to understand where in his code I can make the dates shift one step to the left. But I can't figure out where in the code this shift should occur.

The section where I'm mostly stuck is in Calendar.prototype.showMonth = function(y, m) {...} where I think is the part that requires changing. In this function I don't understand why the author var k = lastDay_of_LastMonth - firstDay_of_Month+1; adds +1 to the last variable?

After var k = ... I'm completely lost. Whenever I try to change things the whole calendar just breaks apart.

@Naguib

 var d7 = new Date(2018, 6, 1); d7 "Sun Jul 01 2018" 00:00:00 GMT+0200 (Central European Summer Time) var firstDay_of_Month = new Date(2018, 6, 1).getDay(); firstDay_of_Month 0 // July 1st is on a Sunday. //_________________________________________________________________ var d8 = new Date(2018, 7, 1); d8 "Wed Aug 01 2018" 00:00:00 GMT+0200 (Central European Summer Time) var firstDay_of_Month = new Date(2018, 7, 1).getDay(); firstDay_of_Month 3 // August 1st is on a Wednesday. //_________________________________________________________________ var dNaguib = new Date(2018, 6, 7); dNaguib "Sat Jul 07 2018" 00:00:00 GMT+0200 (Central European Summer Time) var dNaguib = new Date(2018, 6, 7).getDay(); dNaguib 6 // July 7th is on a Saturday. // Why then does this dynamic code looking for the 7th each month // make everything in the calendar work? var firstDay_of_Month = new Date(y, m, 7).getDay(); // Naguib // While the original code looking for the 1st each month make // some months break the calendar? var firstDay_of_Month = new Date(y, m, 1).getDay(); // Original 

Answer 1

Check out this code from Nikhil Talreja. It should give you a good idea as to how to get the calendar working with Monday as a start date. A lso, check out the similar question.

Essentially, he uses some for loops and labels, such that:

cal_days_labels = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat','Sun'];

and

for (var j = 1; j <= 7; j++)

The project is similar to yours I would imagine, so hopefully this helps.

Answer 2

I went through the codepen you attached and went through every part in the code where Sunday is mentioned and modified it to become this: https://codepen.io/naguibihab/pen/aKMYpB

Here are the changes that I did: https://github.com/naguibihab/js-goodies/commit/aa14d87eea68860650aee3383b458a0b00fb64a9

I'll explain why I did each change, this is taking me back to my college days where I have to explain my code so bear with me:

1:

  this.DaysOfWeek = [
    'Mon',
    'Tue',
    'Wed',
    'Thu',
    'Fri',
    'Sat',
    'Sun'
  ];

That's the header row's title in the calendar, that's simply text no logic changes there

2: firstDayOfMonth = 6 Your first day of the month is now Monday and not Sunday, you can also write , firstDayOfMonth = new Date(y, m, 7).getDay() to get the same result but I think the first one makes it a bit clearer to the reader as we'll always be getting 6 anyway

3: if ( dow == 1 ) { start a new row on Monday instead of Sunday

4: if ( dow == 0 ) { close the row on Sunday instead of Saturday

5: for(dow; dow < 7; dow++) { next month's "not-current" numbers can go up to Sunday so we need an extra iteration there (There might be a better way to do that without increasing iterations but I'm too lazy to figure it out now)

It mostly is a concept of "try to change something and see what happens" kind of method to get there, so what I did was go over each area where I suspect Sunday is affecting the code and tried to change it to see what happens.

Let me know in the comments if that doesn't make enough sense.