如何将日历的开始日期布局从星期日更改为星期一？ [英] How to change calendar's start date layout from Sunday to Monday?

问题描述

我正在尝试从作者xMark的日历示例代码中学习JavaScript。但他的示例使用星期日作为一周的第一天。我希望它将星期一显示为一周的第一天。到目前为止，我只能更改标题标签，而不能更改日期的正确位置。
https://codepen.io/xmark/pen/WQaXdv

因此，我一直试图了解在他的代码中我可以使日期向左移动一步。但是我无法弄清楚这种转变应该发生在代码中的什么地方。

我最受困的部分是 Calendar.prototype .showMonth = function（y，m）{...} 我认为这是需要更改的部分。在此函数中，我无法理解为什么作者 var k = lastDay_of_LastMonth-firstDay_of_Month + 1; 将+1添加到最后一个变量？

在 var k = ... 之后，我完全迷路了。每当我尝试更改事物时，整个日历就会崩溃。

@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 =新日期（2018，6，1）.getDay（）; firstDay_of_Month0 // 7月1日是星期日。 // _________________________________________________________________ var d8 =新日期（2018年7月1日）； d8 2018年8月1日星期三 00:00:00 GMT + 0200（中欧夏令时）var firstDay_of_Month =新日期（2018年7月1日）。 getDay（）; firstDay_of_Month3 // // 8月1日是星期三。 // _________________________________________________________________ var dNaguib =新日期（2018、6、7）； dNaguib 2018年7月7日星期六 00:00:00 GMT + 0200（中欧夏令时）var dNaguib =新日期（2018、6、7）。 getDay（）; dNaguib6 // 7月7日是星期六。 //那么为什么此动态代码每个月都要查找第7个//使日历中的所有内容都能正常工作？var firstDay_of_Month = new Date（y，m，7）.getDay（）; // Naguib ///而当原始代码每月寻找第一个时会///几个月打破日历？var firstDay_of_Month = new Date（y，m，1）.getDay（）; //原始 

解决方案

我仔细阅读了您附带的代码笔，并遍历了提到星期日的代码中的每个部分，并将其修改为： https://codepen.io/naguibihab/pen/aKMYpB

这是我所做的更改： https://github.com/naguibihab/js-goodies/commit/aa14d87eea68860650aee3383b458a b $ 9 b

我将解释为什么每次进行更改，这使我回到了大学时代，在这里我必须解释我的代码，所以请多多包涵：

1：

  this.DaysOfWeek = [
'Mon'，
'Tue' ，
星期三，
星期四，
星期五，
星期六，
星期日，
]； 
  

这是日历中标题行的标题，只是文本没有逻辑更改

2： firstDayOfMonth = 6
您每月的第一天是星期一，而不是星期日，您还可以写，firstDayOfMonth = new Date（y，m，7）.getDay（）得到相同的结果，但我认为第一个使读者更清楚，因为总是总是得到 6

3： if（dow == 1）{ 在星期一而不是星期日开始新行

4： if（dow == 0）{在星期日而不是星期六关闭行

5： for（dow; dow< 7; dow ++）{下个月的非当前数字可能会持续到星期日，因此我们需要在那里进行一次额外的迭代（也许有一种更好的方法可以在不增加迭代次数的情况下做到这一点，但我现在懒得弄清楚了）

主要是尝试更改某些内容并查看会发生什么情况的概念是一种到达那里的方法，所以我所做的就是遍历我怀疑星期日影响代码的每个区域，然后尝试对其进行更改以查看会发生什么。

我在评论中知道这是否还不够合理。

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

解决方案

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.

这篇关于如何将日历的开始日期布局从星期日更改为星期一？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！