使用Flask制作美观的网页日历

简介: 今天讲使用Flask制作美观的网页日历


Python Calender模块


python的日历模块Calender提供了多种日历展示模式:

参数 说明 示例
setfirstweekday(firstweekday) 0是星期一,…,6为星期日 calendar.setfirstweekday(firstweekday=6)
monthcalendar(year, month) 返回一个月中天数列表(不是当前月份的天数为0) calendar.monthcalendar(2019, 6)
prmonth(theyear, themonth, w=0, l=0) w每个单元格宽度,l每列换l行 calendar.prmonth(2019, 6)
calendar.month_abbr[month] 打印月份对应的英文简写 calendar.month_abbr[6]
... ... ...

基本的就是上面这些了....


Bootstrap 表格


Flask使用Bootstrap模板,这个前几期已经说了,还不清楚的朋友,可以看看往期内容。

今天主要说下Bootstrap的table

说明
.table 少量的内补(padding)和水平方向的分隔线
.table-striped <tbody> 之内的每一行增加斑马条纹样式
.table-bordered 为表格和其中的每个单元格增加边框
.table-hover 可以让 <tbody> 中的每一行对鼠标悬停状态作出响应
.table-condensed 可以让表格更加紧凑,单元格中的内补(padding)均会减半
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作


Flask日历


今天通过Flask,制作一个网页版日历,系统启动后,计算当天日期,并生成日历,高亮表示本月和今日。


首先,需要考虑日历的响应式布局,每行放四个月的数据,所以需要使用Bootstrap的栅格化<div class="col-lg-3">,保证在没有足够宽的情况下,自动转为单月的数据展示,避免重叠


其次,针对数据的排列,日历模块中calendar.monthcalendar(year, month)会返回一个原组,但如同下面的情况:

>>> import calendar
>>> calendar.setfirstweekday(firstweekday=6)
>>> calendar.monthcalendar(2019,5)
>>> [[0, 0, 0, 1, 2, 3, 4], [5, 6, 7, 8, 9, 10, 11],
     [12, 13, 14, 15, 16, 17, 18], [19, 20, 21, 22, 23, 24, 25],
     [26, 27, 28, 29, 30, 31, 0]]
>>> calendar.monthcalendar(2019,6)
>>> [[0, 0, 0, 0, 0, 0, 1], [2, 3, 4, 5, 6, 7, 8], 
     [9, 10, 11, 12, 13, 14, 15], [16, 17, 18, 19, 20, 21, 22],
     [23, 24, 25, 26, 27, 28, 29], [30, 0, 0, 0, 0, 0, 0]]
>>> len(calendar.monthcalendar(2019,5))
>>> 5
>>> len(calendar.monthcalendar(2019,6))
>>> 6


有的月份刚好卡在1号周六,所以列表长为6....这样会导致绘图的时候日历表格高度差异,所以如果不满6个的月份,我们手动给他创建创建一个数据全为0的空列表:

def calc_calender(date):
    year = date.year
    yearInfo = dict()
    for month in range(1, 13):
        days = calendar.monthcalendar(year, month)
        if len(days) != 6:
            days.append([0 for _ in range(7)])
        month_addr = calendar.month_abbr[month]
        yearInfo[month_addr] = days
    return yearInfo


针对返回的数据,使用Jinjia2模板进行循环获取,要注意一点是,如果是日期是0的,代表站位符,需要进行替换。

但如果整行都是零,会导致Bootstrap的表单样式变更,故使用&nbsp进行占位操作。

最终HTML代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Flask Calendar</title>
    <link rel="icon" href="{{ url_for('static',filename='favicon.ico') }}">
    <link href="{{ url_for('static',filename='bootstrap.min.css') }}" rel="stylesheet">
</head>
<body>
<div class="container">
    <h3 class="text-center">Welcome to Flask Calendar {{date.year}} <small><a href="https://www.jianshu.com/u/d23fd5012bed"> 清风Python</a></small></h3>
    {% set week_addr = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] %}
    {% for month_addr,monthInfo in content.items()%}
    <div class="col-lg-3">
        <h4 class="text-center">{{month_addr}}</h4>
        {% with _month=false %}
        {% if month_addr == this_month %}
            <table style='background-color:#a6e1ec' class="table table-bordered">
            {% set _month = true %}
        {% else %}
            <table class="table table-bordered">
        {% endif %}
                <tr>
                    {% for addr in week_addr %}
                        <th>{{addr}}</th>
                    {% endfor %}
                </tr>
                {% for weeks in monthInfo %}
                <tr>
                    {% for day in weeks %}
                    {% if day == 0 %}
                    <td>&nbsp</td>
                    {% elif _month== true and day == date.day %}
                    <td style="background-color:hotpink;">{{ day }}</td>
                    {% else %}
                    <td>{{ day }}</td>
                    {% endif %}
                    {% endfor %}
                </tr>
                {% endfor %}
                {% endwith %}
            </table>
    </div>
    {% endfor %}
</div>
</body>
<footer class="text-center "><strong><a href="https://www.jianshu.com/u/d23fd5012bed">Flask Calendar By:清风Python</a></strong></footer>
</html>


JInjia2模板中,通过对with 和set的局部变量定义,判断月份与日期,最终达到高亮当月和当天的效果:

网络异常,图片无法展示
|

当天高亮效果.png


完整代码:

# -*- coding: utf-8 -*-
# @Author   : 王翔
# @JianShu  : 清风Python
# @Date     : 2019/6/4 06:01
# @Software : PyCharm
# @version  :Python 3.6.8
# @File     : index.py
from flask import Flask, render_template, request, session, redirect, url_for
import calendar
from datetime import datetime
calendar.setfirstweekday(firstweekday=6)
app = Flask(__name__)
week = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
def calc_calender(date):
    year = date.year
    yearInfo = dict()
    for month in range(1, 13):
        days = calendar.monthcalendar(year, month)
        if len(days) != 6:
            days.append([0 for _ in range(7)])
        month_addr = calendar.month_abbr[month]
        yearInfo[month_addr] = days
    return yearInfo
@app.route('/', methods=["GET", "POST"])
def index():
    if request.method == "GET":
        date = datetime.today()
        this_month = calendar.month_abbr[date.month]
        return render_template('index.html', this_month=this_month, date=date, content=calc_calender(date))
if __name__ == '__main__':
    app.run(debug=True)


最终完成模板渲染后,显示年度日历:

网络异常,图片无法展示
|

Flask Calendar.gif

完整代码上传在GitHub:https://github.com/KingUranus/FlaskTests




相关文章
|
数据可视化 Docker Python
【保姆级】Python项目(Flask网页)部署到Docker的完整过程
相信看到这篇文章的读者应该已经学会了Docker的安装以及Docker的基本使用,如果还不会的可以参考我之前的文章进行详细学习!
1248 0
|
3月前
|
iOS开发 MacOS Python
Python编程小案例—利用flask查询本机IP归属并输出网页图片
Python编程小案例—利用flask查询本机IP归属并输出网页图片
36 1
|
3月前
|
Python
Flask学习笔记(四):基于Flask网页显示图片
这篇博客文章介绍了如何使用Flask框架在网页上显示图片。
95 0
|
8月前
|
前端开发 安全 JavaScript
Python的Flask框架的学习笔记(前后端变量传送,文件上传,网页返回)内含实战:实现一个简单的登录页面
Python的Flask框架的学习笔记(前后端变量传送,文件上传,网页返回)内含实战:实现一个简单的登录页面
200 0
|
5月前
|
前端开发 数据处理 数据库
Flask与Jinja2的魔法配方:如何轻松烹制动态网页大餐?
【8月更文挑战第31天】《Flask与Jinja2:打造动态网页的前端利器》一文详细介绍了如何利用Python的Flask框架和Jinja2模板引擎构建动态网页。通过创建简单博客首页的例子,展示了如何定义Flask路由和视图函数获取文章数据,并使用Jinja2模板展示数据。Jinja2的简洁语法和强大功能使得处理复杂数据结构变得轻松,支持循环、条件判断及自定义过滤器等功能,实现了前后端数据的有效分离,极大提升了代码可维护性和前端数据处理能力。这篇文章不仅简化了动态网页生成过程,还展示了前端丰富的逻辑处理能力,适合希望快速构建灵活强大前端界面的开发者阅读。
52 0
|
机器人 UED Python
基于Python+Flask实现一个简易网页验证码登录系统案例
基于Python+Flask实现一个简易网页验证码登录系统案例
230 0
|
Web App开发 前端开发 JavaScript
用 Flask 来写个轻博客 (28) — 使用 Flask-Assets 压缩 CSS/JS 提升网页加载速度
目录 目录 前文列表 扩展阅读 Flask-Assets 将 Flask-Assets 应用到项目中 前文列表 用 Flask 来写个轻博客 (1) — 创建项目 用 Flask 来写个轻博客 (2) — Hello World! 用 Flask 来写...
1500 0
|
缓存 数据库 开发工具
用 Flask 来写个轻博客 (27) — 使用 Flask-Cache 实现网页缓存加速
目录 目录 前文列表 扩展阅读 Flask-Cache 应用 Flask-Cache 实现视图函数缓存 缓存无参数的普通函数 缓存带参数的普通函数 缓存无动态参数的视图函数 缓存带动态参数的视图函数 前文列表 用 Flask 来写个轻博客 (1)...
1645 0
|
Python
flask处理网页时间
如果Web程序的用户来自于世界各地,我们就需要合理的处理不同地区的日期和时间(不过估计也就自己看看,但是梦想还是有的) 服务器使用的UTC(协调世界时),我们就只想看到现在几点。
801 0
|
2月前
|
JSON 前端开发 API
使用Python和Flask构建简易Web API
使用Python和Flask构建简易Web API
145 3