如何在Django项目中自定义HTMLCalendar：按钮、分隔线与样式定制

一、自定义HTMLCalendar实现需求 #

要完成你的两个自定义需求，需要继承Python标准库的HTMLCalendar类，重写对应方法来修改日历生成逻辑，具体步骤如下：

1. 定义自定义日历类 #

在Django视图文件中创建子类继承HTMLCalendar，重写formatmonthname（处理月份标题分隔线）和formatday（处理带事件的日期）方法：

from calendar import HTMLCalendar
from datetime import date
from .models import Workout

class CustomWorkoutCalendar(HTMLCalendar):
    def __init__(self, year, month, workout_dates):
        super().__init__()
        self.year = year
        self.month = month
        # 存储当前月份有Workout事件的日期集合
        self.workout_dates = workout_dates

    # 重写月份标题生成方法，添加分隔线
    def formatmonthname(self, theyear, themonth, withyear=True):
        # 获取默认的月份标题HTML
        base_title = super().formatmonthname(theyear, themonth, withyear)
        # 在标题后添加自定义分隔线
        return f"{base_title}<hr class='month-title-separator'>"

    # 重写日期生成方法，处理带Workout事件的日期
    def formatday(self, day, weekday):
        if day == 0:
            # 非当前月份的空白日期，返回默认空单元格
            return '<td class="noday">&nbsp;</td>'
        
        current_date = date(self.year, self.month, day)
        if current_date in self.workout_dates:
            # 有Workout事件的日期，返回带链接的按钮
            return f'<td class="workout-date"><a href="/workout/detail/{current_date}/" class="workout-btn">{day}</a></td>'
        else:
            # 普通日期，返回默认格式
            return f'<td class="normal-date">{day}</td>'

2. 在ListView中集成自定义日历 #

修改你的ListView，查询当前月份的Workout事件日期，实例化自定义日历类并生成日历HTML：

from django.views.generic import ListView
from datetime import date

class WorkoutCalendarListView(ListView):
    model = Workout
    template_name = 'your_calendar_template.html'

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        
        # 获取请求中的年月参数，默认使用当前日期
        target_year = int(self.request.GET.get('year', date.today().year))
        target_month = int(self.request.GET.get('month', date.today().month))

        # 查询当前月份所有有Workout的日期，去重后转成集合
        workout_dates = set(
            Workout.objects.filter(
                date__year=target_year,
                date__month=target_month
            ).values_list('date', flat=True)
        )

        # 实例化自定义日历并生成HTML
        calendar = CustomWorkoutCalendar(target_year, target_month, workout_dates)
        context['calendar_html'] = calendar.formatmonth(withyear=True)
        
        return context

3. 模板中渲染日历 #

在模板文件中直接渲染生成的日历HTML（添加|safe过滤器避免HTML转义），并补充CSS样式：

<div class="calendar-wrapper">
    {{ calendar_html|safe }}
</div>

<style>
/* 月份标题分隔线样式 */
.month-title-separator {
    border: 0;
    border-top: 2px solid #e0e0e0;
    margin: 8px 0 16px;
}

/* 带Workout事件的日期按钮样式 */
.workout-btn {
    display: inline-block;
    padding: 5px 10px;
    background-color: #2196F3;
    color: white;
    border-radius: 4px;
    text-decoration: none;
}

.workout-btn:hover {
    background-color: #1976D2;
}

.workout-date {
    text-align: center;
}

.normal-date {
    text-align: center;
    padding: 5px;
}
</style>

二、颜色变化条件的位置选择 #

• 判断逻辑（是否有Workout事件）必须写在视图中：因为需要查询数据库中的Workout数据，模板的职责是渲染内容，不应处理数据库查询或业务逻辑，否则违反MVC架构的分离原则。
• 颜色样式写在CSS中（模板或独立CSS文件）：通过给带事件的日期元素添加特定class（如workout-btn），在CSS中定义该class的颜色样式，实现逻辑与样式的分离，便于后续维护和修改。

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