How To Change Calendar's Start Date Layout From Sunday To Monday?

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 f

Solution 1:

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.

Solution 2:

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. Also, 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.