日历从星期一开始

在您的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()），您会发现更容易弄清楚发生了什么，并且更容易让您的大脑解决更复杂的代码问题。

希望这可以帮助。

更新 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;
}