CODEWITHSUNDEEP
javascriptdatecalendar
piggy
piggy

Reputation: 93

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 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

Upvotes: 0

Views: 1587

Answers (2)

Naguib Ihab
Naguib Ihab

Reputation: 4496

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.

Upvotes: 1

HunBurry
HunBurry

Reputation: 133

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.

Upvotes: 1

Related Questions