Django3项目FullCalendar加载事件时出现Unexpected token渲染错误如何解决

你的代码触发语法错误的核心原因如下：

• FullCalendar的events配置项接收事件数组时，外层需要使用中括号[]包裹，你当前错误使用了大括号{}，导致JS解析时把内部的事件对象识别为非法的对象属性，直接抛出Unexpected token '{'异常。
• 模板循环拼接JS数组时，最后一个事件对象后默认带的尾逗号在部分低版本浏览器中也会触发语法错误，需要额外处理。

修复后可直接运行的代码 #

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var cUI = document.getElementById('calendar');
        var c = new FullCalendar.Calendar(cUI, {
            themeSystem: 'bootstrap',
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: '',
            },
            // 外层改为中括号包裹数组
            events: [
            {% for v in vacation %}
                {
                    title: "{{ v.reason }}: {{ v.starth }}-{{ v.endh }}",
                    start: "{{ v.start | date:'Y-m-d' }}",
                    end: "{{ v.end | date:'Y-m-d' }}",
                }{% if not forloop.last %},{% endif %}
            {% endfor %}
            ],
        });
        c.render();
        c.setOption('locale', 'es');
    });
</script>

更稳妥的优化方案 #

避免在模板中直接拼接JS代码，防止事件内容包含双引号、换行等特殊字符时再次触发语法错误，可使用Django自带的json_script标签实现数据安全传递：

1. 先在模板中把Django变量序列化输出为隐藏的script标签：

{{ vacation|json_script:"vacation-data" }}

2. 在JS代码中读取解析后再传入FullCalendar配置：

const vacationData = JSON.parse(document.getElementById('vacation-data').textContent);
const events = vacationData.map(v => ({
    title: `${v.reason}: ${v.starth}-${v.endh}`,
    start: v.start,
    end: v.end
}));
// 把events变量传入FullCalendar的events配置项即可

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