週一的日曆開始週數

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 queySelector 
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 queySelector 
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; 
}