显示七日日历

Question

谁能帮我解决这个问题？ 我会列出一个只有 7 天可见的日历。天 ['Ma', 'Di', 'Woe', 'Do', 'Vrij', 'Za', 'Zo'] 必须保持在同一位置。只有数字必须改变。

我的 JS 代码不起作用。

<div class="calendar">
   <p class="month" id="month"></p>
     <div class="d-flex justify-content-around" id="daysContainer">
                        
     </div>
</div>


<script>
 function generateWeekDays() {
    var daysOfWeek = ['Ma', 'Di', 'Woe', 'Do', 'Vrij', 'Za', 'Zo']; 
    var today = new Date();
    var currentDay = today.getDay();
    var daysContainer = document.getElementById('daysContainer');

    
    daysContainer.innerHTML = '';

    
    for (var i = 0; i < 5; i++) {
        var dayIndex = (currentDay + i) % 7;
        var dayName = daysOfWeek[dayIndex];
        var dayNumber = today.getDate() + i;
        var dayElement = document.createElement('div'); 

        var classes = 'flex-direction-row ' + dayName.toLowerCase(); 
        if (i === 0) classes += ' active'; 
        dayElement.className = classes;

        dayElement.innerHTML = '<div class="number">' + dayNumber + '</div>' + '<div class="day">' + dayName + '</div>';

        daysContainer.appendChild(dayElement);
    }

    var monthElement = document.getElementById('month');
    var monthNames = ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'];
    var currentMonth = today.getMonth();
    monthElement.textContent = monthNames[currentMonth];
}

window.onload = generateWeekDays;
</script>

如果我使用console.log，那么我在控制台中看不到任何内容。 我不知道我做错了什么？？

有谁可以帮助我吗？谢谢！

Answer 1

您只循环了 5 次而不是 7 次，这意味着您不会生成一周中的所有天。

试试这个

<div class="calendar">
    <p class="month" id="month"></p>
    <div class="d-flex justify-content-around" id="daysContainer"></div>
</div>

<script>
function generateWeekDays() {
    const daysOfWeek = ['Zo', 'Ma', 'Di', 'Woe', 'Do', 'Vrij', 'Za']; // Start with Sunday to align with getDay()
    const today = new Date();
    let currentDay = today.getDay();
    const daysContainer = document.getElementById('daysContainer');

    daysContainer.innerHTML = '';

    for (let i = -currentDay + 1; i <= -currentDay + 7; i++) { // Loop from current day - 1 to + 5 to cover 7 days
        const dayDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + i);
        const dayIndex = dayDate.getDay();
        const dayName = daysOfWeek[dayIndex];
        const dayNumber = dayDate.getDate();
        const dayElement = document.createElement('div');

        const classes = 'day-item ' + dayName.toLowerCase();
        dayElement.className = classes;

        dayElement.innerHTML = `<div class="number">${dayNumber}</div><div class="day">${dayName}</div>`;

        daysContainer.appendChild(dayElement);
    }

    const monthElement = document.getElementById('month');
    const monthNames = ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'Oktober', 'November', 'December'];
    monthElement.textContent = monthNames[today.getMonth()];
}

window.onload = generateWeekDays;
</script>

我希望这有帮助