### 日历前端实现教程
#### React 实现日历组件
通过学习基于 React 的日历组件开发，可以快速掌握如何构建一个基础的日历界面并扩展其功能。React 提供了强大的状态管理和组件化能力，使得开发者能够轻松创建复杂的 UI 组件[^1]。
以下是使用 React 构建简单日历的核心逻辑：
```javascript
import React, { useState } from 'react';
function Calendar() {
const [currentMonth, setCurrentMonth] = useState(new Date());
function getDaysInMonth(year, month) {
return new Date(year, month + 1, 0).getDate();
}
function renderCalendarDays(daysCount, startDayIndex) {
let daysArray = [];
for (let i = 0; i < startDayIndex; i++) {
daysArray.push(<div key={`empty
-${i}`} className="calendar
-day empty"></div>);
}
for (let day = 1; day <= daysCount; day++) {
daysArray.push(
<div key={day} className="calendar
-day">
{day}
</div>
);
}
return daysArray;
}
const year = currentMonth.getFullYear();
const month = currentMonth.getMonth();
const daysCount = getDaysInMonth(year, month);
const firstDayOfMonth = new Date(year, month, 1).getDay();
return (
<div className="calendar
-container">
<h2>{`${year} 年 ${month + 1} 月`}</h2>
<div className="calendar
-days
-header">
{['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(weekday => (
<div key={weekday}>{weekday}</div>
))}
</div>
<div className="calendar
-days
-body">{renderCalendarDays(daysCount, firstDayOfMonth)}</div>
</div>
);
}
export default Calendar;
```
此代码片段展示了如何利用 JavaScript 中 `Date`
对象计算每个月的天数以及每周的第一天位置，并将其渲染到页面上。
---
#### 使用原生 HTML 和 CSS 制作简易日历
对于初学者来说，可以通过纯 HTML、CSS 和少量 JavaScript 来制作一个静态日历。这种
方法有助于理解日期
对象的基础操作和布局
设计原理[^2]。
下面是一个简单的例子：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF
-8">
<title>Simple Calendar</title>
<style>
.calendar
-table {
border
-collapse: collapse;
width: 100%;
}
.calendar
-table td, .calendar
-table th {
border: 1px solid black;
padding: 10px;
text
-align: center;
}
</style>
</head>
<body>
<table class="calendar
-table">
<tr>
<th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>
</tr>
<tbody id="calendarBody"></tbody>
</table>
<script>
const today = new Date();
const year = today.getFullYear();
const month = today.getMonth(); // Months are zero
-based.
// Get the number of days in this month.
function getDaysInMonth(y, m) {
return new Date(y, m + 1, 0).getDate();
}
// Find out which weekday is the first one of the given month/year combination.
function getFirstWeekdayOfTheMonth(y, m) {
return new Date(y, m, 1).getDay();
}
const totalDays = getDaysInMonth(year, month);
const startingPosition = getFirstWeekdayOfTheMonth(year, month);
document.getElementById('calendarBody').innerHTML =
Array.from({ length: Math.ceil((startingPosition + totalDays) / 7) }, (_, rowIndex) =>
`<tr>${Array.from({ length: 7 }, (_, colIndex) => {
const dateNumber = rowIndex * 7 + colIndex
- startingPosition + 1;
if (dateNumber > 0 && dateNumber <= totalDays) {
return `<td>${dateNumber}</td>`;
} else {
return '<td></td>';
}
}).join('')}</tr>`
).join('');
</script>
</body>
</html>
```
这段脚本定义了一张表格形式的日历，其中填充了当前月份的所有日子及其对应的星期几。
---
#### Vue.js 开发动态交互式日历
如果倾向于采用 Vue 框架，则可以从头开始搭建具备高度自定义特性的日历插件。Vue 的双向绑定机制让数据更新变得极为简便，从而简化了许多繁琐的手动 DOM 调整工作[^3]。
示例代码如下所示：
```vue
<template>
<div class="calendar">
<h3>{{ selectedYear }}年{{ selectedMonth + 1 }}月</h3>
<table>
<thead>
<tr>
<th v
-for="(weekName, index) in weekNames" :key="'w' + index">{{ weekName }}</th>
</tr>
</thead>
<tbody>
<tr v
-for="(row, rindex) in calendarRows" :key="'r' + rindex">
<td v
-for="(cell, cindex) in row" :key="'c' + cindex"
:class="{ inactive: !cell.active, active: cell.active }">
{{ cell.day }}
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
selectedDate: new Date(),
};
},
computed: {
selectedYear() {
return this.selectedDate.getFullYear();
},
selectedMonth() {
return this.selectedDate.getMonth();
},
daysInSelectedMonth() {
return new Date(this.selectedYear, this.selectedMonth + 1, 0).getDate();
},
firstDayOfWeek() {
return new Date(this.selectedYear, this.selectedMonth, 1).getDay();
},
lastDayOfWeek() {
return new Date(this.selectedYear, this.selectedMonth + 1, 0).getDay();
},
calendarRows() {
const rows = [];
let count = 1;
for (let i = 0; i < 6; i++) {
rows[i] = [];
for (let j = 0; j < 7; j++) {
if ((i === 0 && j >= this.firstDayOfWeek || count <= this.daysInSelectedMonth)) {
rows[i][j] = { day: count++, active: true };
} else {
rows[i][j] = { day: null, active: false };
}
}
if (count > this.daysInSelectedMonth) break;
}
return rows;
},
weekNames() {
return ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
},
},
methods: {},
};
</script>
<style scoped>
.inactive {
color: lightgray;
cursor: not
-allowed;
}
.active:hover {
background
-color: yellowgreen;
cursor: pointer;
}
</style>
```
上述模板描述了一个完整的响应式日历视图结构，支持跨
平台部署至 Web 应用程序中运行良好。
---
最低0.47元/天 解锁文章
扫一扫
681
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
