python使用Flask框架创建一个简单的动态日历

0. 运行效果

运行代码，然后在浏览器中访问 http://127.0.0.1:5000/，将看到一个动态日历，能够通过点击按钮切换月份。

在这里插入图片描述

1. 安装 Flask

首先，确保你已经安装了Flask。如果没有，可以使用以下命令安装：

pip install Flask

测试：

from flask import Flask
#from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/')
#@app.route('/', methods=['GET', 'POST'])
def hello_world():return 'Hello, World!'#return render_template('calendar.html')
# 仅在开发环境中使用
if __name__ == '__main__':app.run(debug=True)  # 仅用于开发环境

在这里插入图片描述
打开 http://127.0.0.1:5000 ，可看到helloworld

2. 项目结构

/项目目录
├── app.py
├── static
│   └── bg.jpg  # 确保你将背景图放在这里
└── templates└── calendar.html

3. 创建 Flask 应用

接下来，创建一个名为 app.py 的文件。
导入必要的库：

from flask import Flask, render_template, request
import calendar
from datetime import datetime

其中，render_template: 用于渲染 HTML 模板。request: 用于处理 HTTP 请求数据。calendar: Python 的日历模块，用于生成日历。datetime: 用于获取当前日期和时间。

创建 Flask 应用，__name__ 表示当前模块的名称。

app = Flask(__name__)

定义路由

@app.route('/', methods=['GET', 'POST'])

使用 datetime.now() 获取当前时间，并提取出当前的年月份。

now = datetime.now()  # Get current date and time
year = now.year
month = now.month

表单提交，如果请求是 POST 方法（通常是表单提交），则从表单中获取用户选择的月份和年份。根据用户的操作（前一个月或下一个月），更新 month 和 year 变量。

if request.method == 'POST':month = int(request.form.get('month'))year = int(request.form.get('year'))if request.form.get('action') == 'prev':if month == 1:month = 12year -= 1else:month -= 1elif request.form.get('action') == 'next':if month == 12:month = 1year += 1else:month += 1

生成日历，渲染html模板

cal = calendar.monthcalendar(year, month)
month_year = f"{year}年{month}月"
return render_template('calendar.html', calendar=cal, month_year=month_year, year=year, month=month, now=now)

代码如下：

from flask import Flask, render_template, request
import calendar
from datetime import datetime
app = Flask(__name__)
@app.route('/', methods=['GET', 'POST'])
def index():now = datetime.now()  # Get current date and timeyear = now.yearmonth = now.monthif request.method == 'POST':month = int(request.form.get('month'))year = int(request.form.get('year'))if request.form.get('action') == 'prev':if month == 1:month = 12year -= 1else:month -= 1elif request.form.get('action') == 'next':if month == 12:month = 1year += 1else:month += 1# Generate calendarcal = calendar.monthcalendar(year, month)month_year = f"{year}年{month}月"return render_template('calendar.html', calendar=cal, month_year=month_year, year=year, month=month, now=now)
if __name__ == '__main__':app.run(debug=True)

4. 创建 HTML 模板

在与 app.py 相同的目录下，创建一个名为 templates 的文件夹，并在其中创建一个名为 calendar.html 的文件，添加代码：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>动态日历</title><style>body {background: url('/static/bg.jpg') no-repeat center center fixed;background-size: cover;margin: 0;padding: 20px;font-family: Arial, sans-serif;}.calendar-container {position: absolute;top: 50px;left: 50px;width: 300px;border: 2px solid white;border-radius: 10px;background: rgba(255, 255, 255, 0.9);box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);padding: 10px;}table {width: 100%;border-collapse: collapse;}th, td {text-align: center;padding: 10px;border: 1px solid #ddd;}.today {background-color: red;color: white;}.header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;}.button {cursor: pointer;font-size: 1.2em;padding: 5px 10px;background: lightgray;border: none;border-radius: 5px;}</style>
</head>
<body>
<div class="calendar-container"><div class="header"><form method="post" style="display: inline;"><input type="hidden" name="month" value="{{ month }}"><input type="hidden" name="year" value="{{ year }}"><button class="button" name="action" value="prev">&#9664;</button></form><span>{{ month_year }}</span><form method="post" style="display: inline;"><input type="hidden" name="month" value="{{ month }}"><input type="hidden" name="year" value="{{ year }}"><button class="button" name="action" value="next">&#9654;</button></form></div><table><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>{% for week in calendar %}<tr>{% for day in week %}{% if day == 0 %}<td></td>{% else %}<td {% if day == now.day and year == now.year and month == now.month %}class="today"{% endif %}>{{ day }}</td>{% endif %}{% endfor %}</tr>{% endfor %}
</table>
</div>
</body>
</html>