星期一的日历开始周

Question

你必须改变什么，以便从星期一而不是星期日开始一周？

我不能在这里发布代码，总是收到错误信息，我不明白，因为我的英语不太好。

`function calendar() {
// show info on init
showInfo();

// vars
var day_of_week = new Array(
'So','Mo', 'Di',
'Mi', 'Do', 'Fr', 'Sa'),
  month_of_year = new Array(
    'Januar', 'Februar', 'März',
    'April', 'May', 'Juni', 'July',
    'August', 'September', 'Oktober',
    'November', 'Dezember'),

  Calendar = new Date(),
  year = Calendar.getYear(),
  month = Calendar.getMonth(),
  today = Calendar.getDate(),
  weekday = Calendar.getDay(),
  html = '';

// start in 1 and this month
Calendar.setDate(1);
Calendar.setMonth(month);

// template calendar
html = '<table>';
// head
html += '<thead>';
html += '<tr class="head_cal"><th colspan="7">' + month_of_year[month] + 
'</th></tr>';
html += '<tr class="subhead_cal"><th colspan="7">' + Calendar.getFullYear() 
+ 
'</th></tr>';
html += '<tr class="week_cal">';
for (index = 0; index < 7; index++) {
  if (weekday == index ) {
    html += '<th class="week_event">' + day_of_week[index] + '</th>';
} else {
  html += '<th>' + day_of_week[index] + '</th>';
}
  }
  html += '</tr>';
  html += '</thead>';

  // body
  html += '<tbody class="days_cal">';
  html += '</tr>';

  // white zone
  for (index = 0; index < Calendar.getDay(); index++) {
    html += '<td class="white_cal"> </td>';
  }  

  for (index = 0; index < 31; index++) {
    if (Calendar.getDate() > index) {

  week_day = Calendar.getDay();

  if (week_day === 0) {
    html += '</tr>';
  }
  if (week_day !== 7) {
    // this day
    var day = Calendar.getDate();
    var info = (Calendar.getMonth() + 1) + '/' + day + '/' + 
    Calendar.getFullYear();

       if (today === Calendar.getDate()) {
          html += '<td><a class="today_cal" href="#" data-id="' + 
          info + '" onclick="return showInfo(\'' + 
          info + '\')">' +
          day + '</a></td>';

          showInfo(info);

        } else {
          html += '<td><a href="#" data-id="' + 
          info + '" onclick="return showInfo(\'' + 
          info + '\')">' +
          day + '</a></td>';
        }

      }

      if (week_day == 7) {
        html += '</tr>';
      }

    }

    Calendar.setDate(Calendar.getDate() + 1);

  } // end for loop
  return html;
}`

Codepen

Answer 1

在day_of_week数组中更改天数，以便星期日到最后。

而不是：

var day_of_week = new Array('So', 'Mo', 'Di','Mi', 'Do', 'Fr', 'Sa')

这样做：

var day_of_week = new Array('Mo', 'Di','Mi', 'Do', 'Fr', 'Sa', 'So')

此外，您应该快速阅读帮助，了解如何创建指向Codepen等外部网站的链接（如果需要，请在问题编辑器中使用问号'？'）。这将有助于你发布代码，链接，格式等等。

此外，当您链接到外部代码站点（如Codepen或JSFiddle）时，您必须在问题或答案中包含一些代码以及完整代码的链接。

<强>更新

好的 - 我明白你的意思了。在我的建议之后，您的星期日期与日期不一致（2017年6月3日是星期六，但显示为星期日）。

因为日期的顺序发生了变化（即周一成为一周的第一天），您需要将工作日抵消-1天。

在white zone中，您需要更改第一个Calendar.getDay()循环：

for (index = 0; index < Calendar.getDay(); index++)

为：

for (index = 0; index < Calendar.getDay() -1; index++)

这照顾了月份前有白色空间的月份的第一周。然后，您需要修复所有其他日历日期。因此，更改下一个循环的Calendar.getDay()也可以抵消它。由此：

week_day = Calendar.getDay();

到此：

week_day = Calendar.getDay() -1;

您应该检查其余的代码并检查其他月份以确保您不会收到无效日期（NaN），因为您将日期减少了一天。

更新2

试试这段代码。这提供了周一至周日日历，并将相应地创建表格。您可以轻松修改相关的表格单元格以包含事件的挂钩和带样式等的实际日期。

如果你想要，你可以创建一个带有循环的表头，并且稍加修改可以使任何给定周的第一天无论你想要什么。我从今年1月到6月的每个月进行了测试，日期工作正常。

_('#calendar').innerHTML = calendar();

// short querySelector
function _(s) {
  return document.querySelector(s);
}

function calendar() {

  var html = '<table><thead><tr>';

  html += '<td>Mon</td>';
  html += '<td>Tue</td>';
  html += '<td>Wed</td>';
  html += '<td>Thu</td>';
  html += '<td>Fri</td>';
  html += '<td>Sat</td>';
  html += '<td>Sun</td>';

  html += '</tr></thead>';

  return html + '<tbody>' + calendarRows(new Date("2017/07/02")) + '</tbody></table>';
}

function calendarRows(dt) {

  var html = '';

  // Get the number of days in the month
  var d = new Date(dt.getFullYear(), dt.getMonth()+1, 0);
  var totalDays = d.getDate();

  // Get the first day of the month
  var f = new Date(dt);
  f.setDate(1);
  // The first day of the month for the date passed
  var firstDayOfMonth = f.getDay();
  // The actual date of the month in the calendar
  var calendarDate = 1;
  // The actual day in any given week. 1 === first day, 7 === last
  var dayOfWeek = 1; 

  while (dayOfWeek < 9 && calendarDate <= totalDays) {

    if (dayOfWeek === 8) {
      dayOfWeek = 1;
    }

    // If we are at the start of a new week, create a new row
    if (dayOfWeek === 1) {
      html += '<tr>';
    }

    // Process the calendar day
    html += '<td>';

    // Is this the first day of the month?
    if (calendarDate === 1 && firstDayOfMonth === dayOfWeek) {
      html += calendarDate;
      calendarDate ++;
    }
    else {
      if (calendarDate === 1 || calendarDate > totalDays) {
        html += '&nbsp;';  
      }
      else {
        html += calendarDate;
        calendarDate ++;
      }
    }

    html +='</td>';

    // Are we at the end of a week?
    if (dayOfWeek === 7) {
      html += '</tr>';
    }

    dayOfWeek ++;
  }

  return html;
}

希望这对您有用。你可以随时收紧代码，但我会把它留给你。我试图让它很容易修改，但承认我很快就把它放在一起试着帮助你。

如果您最终修改了while循环变量，请确保您不会陷入无限循环。

更新3

好的 - 我为你创建了一个Codepen，它可以处理您的格式。您仍然需要使弹出事件起作用并添加相关代码以在日历中显示事件。如果需要，您还可以收紧代码。我把它留下了冗长，所以你可以看到发生了什么。

_('#calendar').innerHTML = calendar();

// short querySelector
function _(s) {
  return document.querySelector(s);
}

// show info
function showInfo(event) {  
    // Your code in here
}

// toggle event show or hide
function hideEvent(){
    _('#calendar_data').classList.toggle('show_data');
}

function calendar() {

  //showInfo();

  var calDate = new Date("2017/06/02");

  var weekdays = new Array( 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So');
  var months = new Array(
        'Januar', 'Februar', 'März',
        'April', 'May', 'Juni', 'July',
        'August', 'September', 'Oktober',
        'November', 'Dezember');

  // Working vars
  var d = calDate.getDate(),
      m = calDate.getMonth(),
      y = calDate.getFullYear(),
      day = calDate.getDay(),
      today = calDate.getDate();

  var html = '<table><thead>';

  // Month
  html += '<tr class="head_cal"><th colspan="7">' + months[m] + '</th></tr>';

  // Year
  html += '<tr class="subhead_cal"><th colspan="7">' + y + '</th></tr>';

  // Days of week
  html += '<tr class="week_cal">';

  for (i = 0; i < 7; i++) {
    if (today == i) {
      html += '<th class="week_event">' + weekdays[i] + '</th>';
    } else {
      html += '<th>' + weekdays[i] + '</th>';
    }
  }

  html += '</tr>';
  html += '</thead>';

  // Individual calendar days
  html += '<tbody class="days_cal">' + calendarRows(calDate, d, m, y, day, today) + '</tbody></table>';

  return html;
}

function calendarRows(calDate, d, m, y, day, today) {

  var html = '';

  // Get the number of days in the month
  var tempDt = new Date(calDate.getFullYear(), calDate.getMonth()+1, 0);
  var totalDays = tempDt.getDate();

  // Get the first day of the month
  tempDt.setDate(1);
  var firstDayOfMonth = tempDt.getDay();

  // Reset the day to 1 (first day of any month)
  d = 1;

  // Counter for tracking day of week. 1 === first day, 7 === last
  var dayOfWeek = 1;

  while (dayOfWeek < 9 && d <= totalDays) {

    if (dayOfWeek === 8) {
      dayOfWeek = 1;
    } 

    // If we are at the start of a new week, create a new row
    if (dayOfWeek === 1) {
      html += '<tr>';
    }

   // Is this the first day of the month?
    if (d === 1 && firstDayOfMonth === dayOfWeek) {
      html += makeCell(d, m, y, today);
      d ++;
    }
    else {
      if (d === 1 || d > totalDays) {
        html += '<td>&nbsp;</td>';  
      }
      else {
        html += makeCell(d, m, y, today);
        d ++;
      }
    }

    // Are we at the end of a week?
    if (dayOfWeek === 7) {
      html += '</tr>';
    }

    dayOfWeek ++;
  }

  return html;
}

function makeCell(d, m, y, today) {

  var info = (m + 1) + "/" + d + "/" + y;

  var cell = "<td><a href='#' ";

  cell += d === today ? "class='today_cal' " : "";
  cell += "data-id='" + info + "' onclick=\"return showInfo('" + info + "')\">";
  cell += d + "</a></td>";

  return cell;
}

如果您将代码模块化为较小的块（如makeCell()），您会发现更容易弄清楚发生了什么，并且更容易让您的大脑解决更复杂的代码问题。< / p>

希望这有帮助。

更新4

更新了相同的Codepen - 我认为这解决了您的问题，而且您可以将一周的第一天设置为您想要的任何一天，并且日历应相应地进行调整。代码更改位于CalendarRows函数：

function calendarRows(calDate, d, m, y, day, today) {

  var html = '';

  // Get the number of days in the month
  var tempDt = new Date(calDate.getFullYear(), calDate.getMonth()+1, 0);
  var totalDays = tempDt.getDate();

  // Get the first day of the month
  tempDt.setDate(1);
  var firstDayOfMonth = tempDt.getDay();

  // Reset the day to 1 (first day of any month)
  d = 1;

  // Weekdays are 0 === Sunday, 6 === Saturday
  var firstDayOfWeek = 1, // <-- this means weeks start on Monday
      lastDayOfWeek = 0, // <-- this measn Sunday
      dayOfWeek = firstDayOfWeek,
      safety = 0,
      endLoop = false;

  while (endLoop === false) {

    safety ++;

    if ((dayOfWeek === firstDayOfWeek && d > totalDays) || safety === 50) {

      if (safety === 50) console.error("Infinite loop safety break");

      break;
    }

    // If we are at the start of a new week, create a new row
    if (dayOfWeek === firstDayOfWeek) {
      html += '<tr>';
    }

   // Is this the first day of the month?
    if (d === 1 && firstDayOfMonth === dayOfWeek) {
      html += makeCell(d, m, y, today);
      d ++;
    }
    else {
      if (d === 1 || d > totalDays) {
        html += '<td>&nbsp;</td>';  
      }
      else {
        html += makeCell(d, m, y, today);
        d ++;
      }
    }

    // Are we at the end of a week?
    if (dayOfWeek === lastDayOfWeek) {
      html += '</tr>';
    }

    // Add a day to the current day counter
    dayOfWeek ++;

    // If we get to Saturday, reset the next day to Sunday
    if (dayOfWeek === 7)
      dayOfWeek = 0;

  }

  return html;
}