Django实现按星期横向排布周历的技术需求与代码优化问询

看起来你现在的日程是逐个堆叠展示的，想要改成横向按星期几分栏、同星期的会议纵向排列的周历样式对吧？我来帮你调整代码实现这个效果：

1. 后端修改（views.py） #

首先我们需要把日程数据按星期几分组，并且固定周一到周日的展示顺序，避免分组后顺序混乱：

def index(request):
    # 按日期和时间排序，确保同天的会议按时间先后排列
    available_times = Available.objects.all().order_by('available_date', 'available_hour')
    
    # 按星期全称分组（比如Monday、Tuesday）
    grouped_by_weekday = {}
    for meeting in available_times:
        weekday = meeting.available_date.strftime('%A')
        if weekday not in grouped_by_weekday:
            grouped_by_weekday[weekday] = []
        grouped_by_weekday[weekday].append(meeting)
    
    # 定义周一到周日的固定顺序，保证横向列的顺序正确
    weekday_order = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']
    # 按顺序生成最终的分组数据，没有会议的星期也会保留空列
    sorted_grouped = {day: grouped_by_weekday.get(day, []) for day in weekday_order}
    
    context = { 'grouped_meetings': sorted_grouped }
    return render(request, 'index.html', context)

2. 前端模板修改（index.html） #

接下来调整模板，用网格布局横向展示星期列，列内纵向排列对应会议：

<div class="container" style="display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.5rem; margin: 2rem 0;">
    {% for weekday, meetings in grouped_meetings.items %}
    <div class="weekday-column" style="border: 1px solid #eee; border-radius: 8px; padding: 1rem;">
        <h3 style="text-align: center; margin-top: 0; color: #333;">{{ weekday }}</h3>
        {% for meeting in meetings %}
        <div class="meeting-box" style="background-color: #f8f9fa; padding: 1rem; border-radius: 6px; margin-bottom: 1rem;">
            <p><strong>{{ meeting.available_date }}</strong></p>
            <p>时间: {{ meeting.available_hour }}</p>
            <p>主题: {{ meeting.description }}</p>
            <p>备注: {{ meeting.message_to_participiant }}</p>
        </div>
        {% empty %}
        <p style="text-align: center; color: #666; padding: 2rem 0;">暂无日程</p>
        {% endfor %}
    </div>
    {% endfor %}
</div>

3. 额外优化提示 #

• 如果需要中文星期名称，把后端的strftime('%A')改成meeting.available_date.strftime('%w')获取星期数字（0为周日，1为周一），再映射成中文名称；或者直接在模板里用{{ weekday|slice:":3" }}显示缩写
• 建议把内联样式移到独立的CSS文件中，让代码结构更整洁
• 如果要聚焦展示某一周的日程，可以在视图中添加日期范围过滤，只获取目标周内的available_date数据

内容的提问来源于stack exchange，提问作者Bob Reynolds