周一到周日的js日历

基础概念

JavaScript日历是一种用于显示日期和时间的用户界面组件。它通常包括月份的视图，显示该月的所有日期，并允许用户导航到不同的月份或年份。日历可以用于选择日期、显示事件或日程安排等。

类型

静态日历：仅显示当前月份的日期。
动态日历：允许用户导航到不同的月份和年份。
事件日历：显示特定日期的事件或任务。

应用场景

日期选择器：在表单中用于选择日期。
日程管理：显示和管理个人或团队的日程安排。
活动预订系统：在酒店、餐厅等预订系统中使用。

示例代码

以下是一个简单的JavaScript日历示例，使用HTML、CSS和JavaScript实现：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Calendar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="calendar"></div>
    <script src="calendar.js"></script>
</body>
</html>

CSS (styles.css)

#calendar {
    width: 300px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.day {
    padding: 5px;
    text-align: center;
    border: 1px solid #ccc;
}

JavaScript (calendar.js)

function generateCalendar(year, month) {
    const calendarDiv = document.getElementById('calendar');
    const daysInMonth = new Date(year, month + 1, 0).getDate();
    const firstDay = new Date(year, month, 1).getDay();

    calendarDiv.innerHTML = `
        <div class="header">
            <button onclick="prevMonth()">Prev</button>
            <h2>${new Date(year, month).toLocaleString('default', { month: 'long', year: 'numeric' })}</h2>
            <button onclick="nextMonth()">Next</button>
        </div>
        <div class="days">
            ${Array.from({ length: firstDay }, () => '<div class="day"></div>').join('')}
            ${Array.from({ length: daysInMonth }, (_, i) => `<div class="day">${i + 1}</div>`).join('')}
        </div>
    `;
}

function prevMonth() {
    const currentDate = new Date(document.querySelector('.header h2').textContent);
    generateCalendar(currentDate.getFullYear(), currentDate.getMonth() - 1);
}

function nextMonth() {
    const currentDate = new Date(document.querySelector('.header h2').textContent);
    generateCalendar(currentDate.getFullYear(), currentDate.getMonth() + 1);
}

// Initialize calendar with current month
generateCalendar(new Date().getFullYear(), new Date().getMonth());