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

news2024/12/21 14:02:10

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 = 12
            year -= 1
        else:
            month -= 1
    elif request.form.get('action') == 'next':
        if month == 12:
            month = 1
            year += 1
        else:
            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 time
    year = now.year
    month = now.month
    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 = 12
                year -= 1
            else:
                month -= 1
        elif request.form.get('action') == 'next':
            if month == 12:
                month = 1
                year += 1
            else:
                month += 1
    # Generate calendar
    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)
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>