如何将Django模型对象传递给Envato模板JS文件渲染日历事件

1. 修复现有后端代码问题 #

你当前的后端代码存在类属性查询只执行一次、序列化结果格式不兼容的问题，按以下方式修正：

1.1 修正序列化器 #

删除冗余的无效字段，只保留FullCalendar需要的事件字段：

from rest_framework import serializers
from .models import Event

class EventSerializer(serializers.ModelSerializer):
    class Meta:
        model = Event
        fields = ['id', 'title', 'start', 'end', 'description']

1.2 修正视图逻辑 #

不要把查询、序列化逻辑写在类属性位置（类属性仅在服务启动时执行一次，后续数据变更不会同步），移到get方法内每次请求实时查询，同时输出标准JSON字符串：

import json
from django.shortcuts import render
from django.contrib.auth.mixins import LoginRequiredMixin
from django.views.generic import TemplateView
from .models import Event
from .serializers import EventSerializer

class Calendar(LoginRequiredMixin, TemplateView):
    template_name = "calendar.html"

    def get(self, request):
        # 按需过滤事件，示例为只返回当前登录用户的事件
        queryset = Event.objects.filter(user=request.user)
        serializer = EventSerializer(queryset, many=True)
        # 转换为JSON字符串传递给模板，避免二进制编码问题
        event_data = json.dumps(serializer.data)
        context = {'event_data': event_data}
        return render(request, 'calendar.html', context)

2. 模板层注入后端数据 #

在calendar.html模板中，引入独立日历JS文件之前，把后端传递的事件数据挂载到全局变量，方便外部JS直接读取，无需把JS代码混写到模板中：

<!-- 放在页面head末尾，或者日历JS引入标签之前 -->
<script>
window.djangoEvents = {{ event_data|safe }};
</script>
<!-- 原有引入日历JS的标签保持不变 -->
<script src="/static/js/your-calendar-file.js"></script>

必须添加|safe模板过滤器，否则Django会自动转义JSON中的引号等特殊字符，导致JS解析失败 #

3. 修改日历JS代码替换硬编码数据源 #

找到JS文件中原来给事件数组e赋值的硬编码片段，替换为后端数据适配逻辑：
找到原有这段代码：

e = [
// 此处是被注释的硬编码示例事件
]

替换为以下适配代码：

// 转换后端事件数据为FullCalendar兼容格式
e = window.djangoEvents.map(event => {
    const formatted = {
        id: event.id,
        title: event.title,
        start: event.start ? new Date(event.start) : null,
        end: event.end ? new Date(event.end) : null,
        // 可按需自定义事件样式类，比如根据事件类型分配不同颜色
        className: 'bg-primary'
    }
    // 过滤掉没有开始时间的无效事件
    return formatted.start ? formatted : null;
}).filter(Boolean);

其余原有JS逻辑完全不需要修改，FullCalendar初始化时会自动读取处理好的事件数组完成渲染。 #

注意事项 #

• 后续实现POST新增/编辑事件接口后，操作完成直接调用FullCalendar实例的c.refetchEvents()方法即可拉取最新事件，无需整页刷新
• 建议统一开启Django时区配置，后端存储UTC时间，前端会自动根据用户本地时区转换显示，避免事件时间偏移
• 如果需要给事件添加跳转链接、自定义颜色等属性，直接在序列化器中增加对应字段，在JS格式化时传入即可，FullCalendar原生支持所有标准事件属性

内容的提问来源于stack exchange，提问作者efraim.lima