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

时间:2018-06-24 22:07:47

标签: javascript date calendar

嗨,我正在尝试从作者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 = 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

2 个答案:

答案 0 :(得分:1)

从Nikhil Talreja中查看this code。它应该使您对如何使日历以星期一作为开始日期有一个好主意。 A lso, check out the similar question.

本质上,他使用一些for循环和标签,例如:

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

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

该项目与您想像的项目相似,因此希望对您有所帮助。

答案 1 :(得分:1)

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

这是我所做的更改:https://github.com/naguibihab/js-goodies/commit/aa14d87eea68860650aee3383b458a0b00fb64a9

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

1:

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

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

2:firstDayOfMonth = 6 您本月的第一天现在是星期一,而不是星期日,您也可以写, firstDayOfMonth = new Date(y, m, 7).getDay()以获得相同的结果,但是我认为第一个使读者更清楚,因为我们将始终得到{{ 1}}

3:6在星期一而不是星期日开始新行

4:if ( dow == 1 ) {在星期日而不是星期六关闭该行

5:if ( dow == 0 ) {下个月的“非当前”数字可能会持续到星期日,因此我们需要在那里进行一次额外的迭代(也许有更好的方法可以做到这一点,而无需增加迭代次数,但是我太懒了现在就弄清楚)

主要是“尝试更改某些内容并查看会发生什么情况”这一概念的一种方法,因此我所做的工作是遍历我怀疑星期日影响代码的每个区域,然后尝试对其进行更改以查看会发生什么。

在评论中让我知道这是否足够有意义。