HTML 日历

17 Mar 2025 | 5 分钟阅读

HTML（超文本标记语言）是 Web 开发的基础，也是构建在线页面框架最流行的工具之一。大多数网站最常见的组件是日历。尽管这个特定的例子将是固定的，但您最终可以通过使用 CSS 和 JavaScript 进行增强来添加更多功能。

HTML 结构：首先，让我们放置简单的 HTML 标记。当我们展示日历时，我们将创建一个表格。一个六行七列的表格将是线性的。一行代表一周，每一行与其他周垂直连接，每列中从左到下有一个一天的间隔。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Calendar</title>
    <link rel="stylesheet" href="styles.css"> <!-- Add CSS file for styling (optional) -->
</head>
<body>

    <h1>HTML Calendar</h1>

    <table>
        <thead>
            <tr>
                <th>Sun</th>
                <th>Mon</th>
                <th>Tue</th>
                <th>Wed</th>
                <th>Thu</th>
                <th>Fri</th>
                <th>Sat</th>
            </tr>
        </thead>
        <tbody>
            <!-- Calendar days will go here -->
        </tbody>
    </table>

</body>
</html>

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Calendar</title>
    <link rel="stylesheet" href="styles.css"> <!-- Add CSS file for styling (optional) -->
    <style>
        /* CSS styles for the calendar (you can put it in a separate styles.css file) */
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>

    <h1>HTML Calendar</h1>

    <table>
        <thead>
            <tr>
                <th>Sun</th>
                <th>Mon</th>
                <th>Tue</th>
                <th>Wed</th>
                <th>Thu</th>
                <th>Fri</th>
                <th>Sat</th>
            </tr>
        </thead>
        <tbody id="calendar-body">
            <!-- Calendar days will go here -->
        </tbody>
    </table>

    <script>
        // Get the reference to the tbody element
        const calendarBody = document.getElementById('calendar-body');

        // Function to populate the calendar
        function populateCalendar() {
            // Clear previous content
            calendarBody.innerHTML = '';

            // Create a new date object for the current month
            const currentDate = new Date();
            const year = currentDate.getFullYear();
            const month = currentDate.getMonth();

            // Get the number of days in the current month
            const daysInMonth = new Date(year, month + 1, 0).getDate();

            // Get the day of the week for the first day of the month
            const firstDayOfMonth = new Date(year, month, 1).getDay();

            // Create the calendar rows and cells
            let date = 1;
            for (let i = 0; i < 6; i++) {
                const row = document.createElement('tr');
                for (let j = 0; j < 7; j++) {
                    if (i === 0 && j < firstDayOfMonth) {
                        // Add empty cells before the first day of the month
                        const cell = document.createElement('td');
                        row.appendChild(cell);
                    } else if (date > daysInMonth) {
                        // Stop if all days of the month have been added
                        break;
                    } else {
                        // Add the day of the month
                        const cell = document.createElement('td');
                        cell.textContent = date;
                        row.appendChild(cell);
                        date++;
                    }
                }
                calendarBody.appendChild(row);
            }
        }

        // Populate the calendar when the page loads
        populateCalendar();
    </script>

</body>
</html>

输出

添加日历日期

现在，我们将在日历中使用日期。我们将使用一个循环，并根据月份生成日期。为了简化事情，我们将采用 6x7 网格，这意味着有 6 周，并且每周的日期数量为 7 天。

<!-- Inside the <tbody> tag -->
<tr>
    <td></td> <!-- Empty cell for Sunday -->
    <td>1</td> <!-- Day 1 -->
    <td>2</td> <!-- Day 2 -->
    <td>3</td> <!-- Day 3 -->
    <td>4</td> <!-- Day 4 -->
    <td>5</td> <!-- Day 5 -->
    <td>6</td> <!-- Day 6 -->
</tr>
<!-- Continue this pattern for each week -->

日历样式（可选）

您可以添加 CSS 样式以创建吸引人的视觉效果。这将使您能够创建一个单独的 CSS 文件 (styles.css)，并将其链接到 HTML 文件的头部。

/* styles.css */

body {
    font-family: 'Arial', sans-serif;
    text-align: center;
}

table {
    width: 80%;
    margin: 20px auto;
    border-collapse: collapse;
}

th, td {
    padding: 10px;
    border: 1px solid #ddd;
}

th {
    background-color: #f2f2f2;
}

td {
    cursor: pointer;
}

td:hover {
    background-color: #f5f5f5;
}

如果 Web 开发人员是初学者，他们可以从制作 HTML 日历本身开始。这些日历页面可以通过应用更好的 CSS 样式或使用 JavaScript 可用的数据部分进一步开发。您可以借助此基本模板日历，将其放置在您的网页中，从而进一步阐述更复杂和高级的日历应用程序。享受乐趣并更新您的外观和功能以对其进行自定义。

向日历添加 JavaScript（可选）

当使用 Javascript 使日历具有交互性时，您可以显示当前月份并允许网站访问者导航到其他月份。为此，让我们创建一个简单的 Javascript。

在 <head> 标签内

<script>
        function createCalendar() {
            const calendarBody = document.getElementById('calendar-body');
            calendarBody.innerHTML = ""; // Reset contents of HTML element completely

            Const daysInMonth = 30; // Replace this with the actual number of days in the current month.
            let dayCounter = 1;

            for (let week = 0; week < 6; week++) {
                const row = document.createElement('tr');

                for (let day = 0; day < 7; day++) {
                    const cell = document.createElement('td');

                    if (dayCounter <= daysInMonth) {
                        cell.textContent = dayCounter;
                        dayCounter++;
                    }

                    row.appendChild(cell);
                }

                calendarBody.appendChild(row);
            }
        }

        document.addEventListener('DOMContentLoaded', createCalendar);
    </script>

此 JavaScript 代码将获得一个包含指定日期的运行月度日历。它可以通过确定本月的实际天数并提供轻松的月份切换选项来做到这一点。

作为 Web 开发解决的基本功能元素之一，HTML 日历提供了一个有序的日期和事件列表。借助 HTML、CSS 和 JavaScript 编程，程序员将能够创建交互式日历，从而改善用户界面并提高日程安排效率。这些日历可以扩展并在设备上响应，其主题也可以与网站的设计风格相匹配。它是一个有用的工具，适用于个人和企业的日程安排需求；然而，其粘性功能使其成为最受认可的功能。

下一主题HTML Cellpadding

HTML 日历

添加日历日期

日历样式（可选）

向日历添加 JavaScript（可选）

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML 日历

添加日历日期

日历样式（可选）

向日历添加 JavaScript（可选）

相关帖子

HTML Onclick 事件

HTML Data Toggle

HTML 中的绿色代码

HTML 居中对齐

如何在 HTML 中实现复制到剪贴板

HTML 中的页眉和页脚

Textarea disabled

HTML 检查器

HTML 内联标签

HTML 颜色标签

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器