最近在学习Django,看视频后决定写一个部门内部的轮班日历来巩固下知识。由于是初学,所以实现逻辑上可能会比较乱,这里真诚的希望有朋友能分享下其他的实现逻辑。下面说下大概的我的实现逻辑。
我们部门值班是每人一周,从周天开始到下周的周六结束,固定的人轮流。首先需要自己写个日历这里借助了datetiem 和 calendar库,然后把人员放到列表,然后根据日期去遍历列表里面的人,并把名字展示到日期下面。效果图如下:
.
下面放出views和 htlml 以及自定义标签部分的代码:
views.py:
import calendar
import datetime
from django.shortcuts import render
def get_date(year=datetime.date.today().year, month=datetime.date.today().month):
dw = dict()
isleap = calendar.isleap(year)
first_weekday = calendar.weekday(year, month, 1)
month_big = [1, 3, 5, 7, 8, 10, 12]
month_small = [4, 6, 9, 11]
# 获取当前月份的天数
if month in month_big:
days = 31
elif month in month_small:
days = 30
else:
if isleap:
days = 29
else:
days = 28
for i in range(1, days + 1):
dw[i] = calendar.weekday(year, month, i)
context = {
'year': year,
'month': month,
'dw': dw,
'first_weekday': [i for i in range(1, first_weekday + 1)],
}
return context
def duty(request, year, month):
if month > 12:
year += 1
month -= 12
context = get_date(year, month)
return render(request, "duty_show.html", context)
自定义标签 :my_tags.py
import calendar
import datetime
from django import template
register = template.Library()
@register.simple_tag(name='duty_name')
def my_tag(year, month, day):
"""
前端传过来的参数
year: 这里是指年份
month: 这里是指月份
day: 这里是指日期
"""
week_day = calendar.weekday(year, month, day) # 获取日期是星期几 返回的是0-6 分别对应 周一到周天
year = str(year)
month = str(month) if month > 9 else '0' + str(month)
day = str(day) if day > 9 else '0' + str(day)
yw_list = ['人员1', '人员2', '人员3', '人员4', '人员5', '人员6', '人员7']
start_date = datetime.datetime.strptime('20220102', '%Y%m%d') # 设置开始日期
date = datetime.datetime.strptime(year + month + day, '%Y%m%d')
days = (date - start_date).days + 1 # 计算和开始日期的间隔天数
if week_day == 6: # 每个周天都需要切换到人员列表的下一个元素
index = (days // 7) % len(yw_list)
else: # 不是周天就依然是前一个周天的值班人员
index = ((days - week_day) // 7) % len(yw_list)
return yw_list[index]
html部分包含两个文件,一个是'父模板',另外一个就是子模板:
basic.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
{% block css %}
{% endblock %}
</head>
<body>
{% block title %}
{% endblock %}
{% block body %}
{% endblock %}
{% block button %}
{% endblock %}
</body>
{% block scripct %}
{% endblock %}
</html>
duty_show.html :
{% extends 'basic.html' %}
{% block css %}
<style type="text/css">
body {
background: lightsteelblue;
text-align: center;
}
div{
color: gray;
font-weight: bolder;
font-size: 15px;
}
</style>
{% endblock %}
{% block title %}
<strong style="font-size: 30px;">当前是: {{ year }}年{{ month }}月</strong>
<br>
<br>
{% endblock %}
{% block body %}
<div style="height: 300px;color: black" id="table">
<table align="center" summary="">
<tr style="font-size: 20px">
<th>Mon.</th>
<th>Tues.</th>
<th>Wed.</th>
<th>Thus.</th>
<th>Fri.</th>
<th>Sat.</th>
<th>Sun.</th>
</tr>
{#留白前面的位置#}
{% for i in first_weekday %}
<td></td>
{% endfor %}
{# 开始循环天数#}
{% for k,v in dw.items %}
{% if v == 6 %}
<td align="center">
<div id="ll{{ k }}">
{{ k }}<br>
{% load my_tags %}
{% duty_name year month k %}
</div>
</td>
<tr></tr>
{% else %}
<td align="center">
<div id="ll{{ k }}">
{{ k }}<br>
{% load my_tags %}
{% duty_name year month k %}
</div>
</td>
{% endif %}
{% endfor %}
</table>
</div>
{% endblock %}
{% block button %}
<button type="button" style="font-size: 20px;margin-top: 40px" id="pre_month">Pre Month</button>
<button type="button" style="font-size: 20px;margin-top: 40px" id="next_month">Next Month</button>
<div id="out"></div>
{% endblock %}
{% block scripct %}
<script type="text/javascript">
function setCurrentUrl() {
let month = {{ month|add:1 }};
let year = {{ year}};
if (month == 13) {
month = 1;
year = year + 1
}
location.assign("http://127.0.0.1:8000/duty/" + year + '/' + month);
}
function setCurrentUrlPre() {
var month = {{ month|add:-1 }};
var year = {{ year}};
if (month === 0 ) {
month = 12;
year = year - 1
}
location.assign("http://127.0.0.1:8000/duty/" + year + '/' + month);
}
document.getElementById("next_month").onclick = function () {
setCurrentUrl()
}
document.getElementById("pre_month").onclick = function () {
setCurrentUrlPre()
}
document.onmousedown = function (){
const obj_id = event.srcElement.id;
if (obj_id.match("^ll")) {
console.log(obj_id);
document.getElementById(obj_id).style.color ="blue";
}
}
</script>
{% endblock %}
以上就是全部代码了,只是简单实现了基础的逻辑,其他的样式什么的都没加基本。而且由于是初次写,逻辑上可能有点乱,分享出来是希望大家能帮忙斧正。谢谢